<div class="box"> <div class="cambio"><a class="enlase" href="#">Inicio</a></div> <div class="cambio"><a class="enlase" href="#">Horario</a></div> <div class="cambio"><a class="enlase" href="#">Blog</a></div> </div> // css .box{ width: 60vw; height: 30px; background: gray; display: flex; justify-content: space-around; } .cambio{ height: 100%; background: blue; } .cambio a{ display: inline-block; width: 100px; height: 100%; color: white; } .active a{ background: red; } .active{ background:red; } // javascript //metodo (1): se señala al elementi que dispara con la i del for // la clase active sirve como puente, sin nesecidad que este en el css let cambio = document.querySelectorAll(".cambio"); for(let i = 0; i < cambio.length; i++) { cambio[i].addEventListener("click", () =>{ cambio.forEach(link => { link.classList.remove("active"); }); cambio[i].classList.add("active"); }); }; // metodo(2): delegación de evento e.target detecta al elemento que dispara // la clase active se incluye en el css // se trabaja solo con enlase. let enlase = document.querySelectorAll(".enlase"); enlase.forEach(lin => { lin.addEventListener("click", (e) => { enlase.forEach(link => { // es el enlase cuando ya tiene el evento click link.classList.remove("active"); }); e.target.classList.add("active"); // detecta donde se iso click(elemento) }); });