I am working on the below nav bar
<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>
By using pure JS, I am trying to add an event listener to each tab of the nav bar, so that when the user clicks on a li item, the tab will be made active by adding a modifier class to that DOM element to highlight it.
So far every answer I've found is using jQuery.
Below's my 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');
});
});
I've also tried using getAttribute by id but I just can't seem to nail it.
Thanks in advance.
Just remove the . from e.target.classList.add('.active');, e.g. 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');
});
});