How to make a tab active when clicked by using pure JS

Question

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.

Answer 1

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');
  });
});