He hecho un menú de navegación de barra lateral simple con 6 elementos. Aquí hay un ejemplo de lo que quiero:
function scale() { const element = document.getElementById('nav1'); element.classList.add('navmenu-clicked'); } .navmenu { color: #213362; font-size: 2vh; position: fixed; left: 2%; text-decoration: none; cursor: default; font-family: Arial, Helvetica, sans-serif; transition: all 2s; } .navmenu-clicked { color: red; font-size: 4vh; } #nav1 { top: 30%; } #nav2 { top: 40%; } #nav3 { top: 50%; } #nav4 { top: 60%; } #nav5 { top: 70%; } #nav6 { top: 80%; } .panel1, .panel2 { height: 100vh; } .panel1 { background-color: red; } .panel2 { background-color: blue; } <a class="navmenu" id="nav1" href="#" onclick="scale()">menu1</a> <a class="navmenu" id="nav2" href="#" onclick="scale()">menu2</a> <a class="navmenu" id="nav3" href="#" onclick="scale()">menu3</a> <a class="navmenu" id="nav4" href="#" onclick="scale()">menu4</a> <a class="navmenu" id="nav5" href="#" onclick="scale()">menu5</a> <a class="navmenu" id="nav6" href="#" onclick="scale()">menu6</a>Espero haberlo explicado bien.
¡Gracias!
Puede pasar this al onclick para que solo agregue / elimine la clase del elemento en el que se hizo clic y use querySelector para eliminar la clase en la que se hizo clic (si no es el elemento en el que se hizo clic actualmente): comentarios en el código que explican lo que está sucediendo
function scale(element) { if (element.classList.contains('navmenu-clicked')) { // check if clicked element has already been clicked - if so remove class element.classList.remove('navmenu-clicked'); } else { const clicked = document.querySelector('.navmenu-clicked'); if (clicked) { // check if there is a clicked element and remove the class if there is clicked.classList.remove('navmenu-clicked'); } // add class to clicked element element.classList.add('navmenu-clicked'); } } .navmenu { color: #213362; font-size: 2vh; position: fixed; left: 2%; text-decoration: none; cursor: default; font-family: Arial, Helvetica, sans-serif; transition: all 2s; } .navmenu-clicked { color: red; font-size: 4vh; } #nav1 { top: 30%; } #nav2 { top: 40%; } #nav3 { top: 50%; } #nav4 { top: 60%; } #nav5 { top: 70%; } #nav6 { top: 80%; } .panel1, .panel2 { height: 100vh; } .panel1 { background-color: red; } .panel2 { background-color: blue; } <a class="navmenu" id="nav1" href="#" onclick="scale(this)">menu1</a> <a class="navmenu" id="nav2" href="#" onclick="scale(this)">menu2</a> <a class="navmenu" id="nav3" href="#" onclick="scale(this)">menu3</a> <a class="navmenu" id="nav4" href="#" onclick="scale(this)">menu4</a> <a class="navmenu" id="nav5" href="#" onclick="scale(this)">menu5</a> <a class="navmenu" id="nav6" href="#" onclick="scale(this)">menu6</a>Si entendí correctamente, desea resaltar solo un enlace a la vez y alternar el estilo de enlace activo al hacer clic también. Vea el fragmento modificado a continuación y mis comentarios en el fragmento JS. Tenga en cuenta que utilicé la delegación de eventos para manejar el evento de clic, que es una forma estándar de manejar tales escenarios.
let activeLink = null; document.body.addEventListener("click", e => { // First reset class of current active link (if it's not null) if (activeLink) { activeLink.classList.remove("navmenu-clicked"); } const link = e.target; if (link === activeLink) { // Clicked on an active link activeLink = null; } else { activeLink = link; activeLink.classList.add("navmenu-clicked"); } }); .navmenu { color: #213362; font-size: 2vh; position: fixed; left: 2%; text-decoration: none; cursor: default; font-family: Arial, Helvetica, sans-serif; transition: all 2s; } .navmenu-clicked { color: red; font-size: 4vh; } #nav1 { top: 30%; } #nav2 { top: 40%; } #nav3 { top: 50%; } #nav4 { top: 60%; } #nav5 { top: 70%; } #nav6 { top: 80%; } .panel1, .panel2 { height: 100vh; } .panel1 { background-color: red; } .panel2 { background-color: blue; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <a class="navmenu" id="nav1" href="#">menu1</a> <a class="navmenu" id="nav2" href="#">menu2</a> <a class="navmenu" id="nav3" href="#">menu3</a> <a class="navmenu" id="nav4" href="#">menu4</a> <a class="navmenu" id="nav5" href="#">menu5</a> <a class="navmenu" id="nav6" href="#">menu6</a> <script src="app.js"></script> </body> </html>