Estoy buscando agregar una clase de elemento activo a mi barra de navegación, cuando selecciono el siguiente enlace, el anterior permanece resaltado, solo quiero que el enlace actual permanezca activo.
Vea el código a continuación:
<header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">service</a></li> <li><a href="#">profile</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> document.querySelectorAll('li').forEach(item => { item.addEventListener('click', event => { alert(item.outerHTML); if(item.className === "active"){ item.classList.remove("active"); } item.classList.add("active"); }); })Puede eliminar la clase activa de todos los elementos li y agregar la clase activa a la actual
document.querySelectorAll('li').forEach(item => { item.addEventListener('click', event => { document.querySelectorAll('li').forEach(i => {i.classList.remove('active')}) item.classList.add('active') }) })Si desea utilizar bucles for
for(let item of document.querySelectorAll('li')) { item.addEventListener('click', event => { // Remove active class from all li for(let i of document.querySelectorAll('li')) { i.classList.remove('active') } item.classList.add('active') }) }porque el elemento en el evento es objetivo de este
document.querySelectorAll('li').forEach(item => { item.addEventListener('click', event => { alert(item.outerHTML); document.querySelectorAll('li').forEach(item => { if(item.className === "active"){ item.classList.remove("active"); } }); item.classList.add("active"); }); })