Estoy trabajando en la barra de navegación de abajo
<nav class="nav" > <ul class="nav__list"> <li id="authors-tag" class="nav__list__item"><a class="nav__list__item__link" href="#">Authors</a></li> <li id="publishers-tag" class="nav__list__item"><a class="nav__list__item__link" href="#">Publishers</a></li> <li id="books-tag" class="nav__list__item"><a class="nav__list__item__link" href="#">Books</a></li> </ul> </nav>Al usar JS puro, estoy tratando de agregar un detector de eventos a cada pestaña de la barra de navegación, de modo que cuando el usuario haga clic en un elemento li, la pestaña se active agregando una clase de modificador a ese elemento DOM para resaltarlo .
Hasta ahora, todas las respuestas que he encontrado están usando jQuery.
A continuación está mi main.js
const tabs = document.querySelectorAll('.nav__list__item__link'); tabs.forEach(clickedTab =>{ clickedTab.addEventListener('click', () => { tabs.forEach( tab => { tab.classList.remove('active'); }); e.target.classList.add('.active'); }); });También intenté usar getAttribute por id, pero parece que no puedo lograrlo.
Gracias por adelantado.
Simplemente elimine el . de e.target.classList.add('.active'); , por ejemplo, e.target.classList.add('active'); .
const tabs = document.querySelectorAll('.nav__list__item__link'); tabs.forEach(clickedTab =>{ clickedTab.addEventListener('click', () => { tabs.forEach( tab => { tab.classList.remove('active'); }); e.target.classList.add('active'); }); });