Quiero crear una barra lateral que cuando se hace clic, solo cambia 1, el resto desaparece.
Por ejemplo como a continuación:
let button = document.querySelectorAll("aside li a"); for (let i = 0; i < button.length; i++) { button[i].addEventListener("click", function() { this.classList.toggle("is-active"); }); } aside ul { position: fixed; list-style-type: none; margin: 0; padding: 0; width: 190px; left: 355px; } aside li a { position: relative; display: block; padding: 5px 20px; color: #145CA6; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-size: 20px; text-decoration: none; top: 100px; } aside li a:hover, aside li a.is-active { color: #fff; background-color: #145CA6; transition: all 1s; } <aside> <ul> <li><a href="#tg">Overview</a></li> <li><a href="#research-objective">Research</a></li> <li><a href="#research">Interview</a></li> <li><a href="#user-journey">User Journey</a></li> <li><a href="#user-persona">Persona</a></li> <li><a href="#ideation">Ideation</a></li> <li><a href="#wireframe">Wireframe</a></li> <li><a href="#final-design">Final Design</a></li> <li><a href="#design-system">Design System</a></li> </ul> </aside>¿Quizás haya otra forma además de crear un toogle y agregarlo en css? Porque estoy confundido al respecto.
Gracias :)
Una solución es eliminar todas las clases is-active de otros buttons antes de agregar el button en el que se hizo clic
let buttons = document.querySelectorAll("aside li a"); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { buttons.forEach(button => button.classList.remove('is-active')); this.classList.add("is-active"); }); } aside ul { position: fixed; list-style-type: none; margin: 0; padding: 0; width: 190px; left: 355px; } aside li a { position: relative; display: block; padding: 5px 20px; color: #145CA6; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-size: 20px; text-decoration: none; top: 100px; } aside li a:hover, aside li a.is-active { color: #fff; background-color: #145CA6; transition: all 1s; } <aside> <ul> <li><a href="#tg">Overview</a></li> <li><a href="#research-objective">Research</a></li> <li><a href="#research">Interview</a></li> <li><a href="#user-journey">User Journey</a></li> <li><a href="#user-persona">Persona</a></li> <li><a href="#ideation">Ideation</a></li> <li><a href="#wireframe">Wireframe</a></li> <li><a href="#final-design">Final Design</a></li> <li><a href="#design-system">Design System</a></li> </ul> </aside>