使用纯JS单击时如何使选项卡处于活动状态

Question

我正在处理下面的导航栏

<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>

通过使用纯 JS，我试图为导航栏的每个选项卡添加一个事件侦听器，这样当用户单击一个 li 项目时，该选项卡将通过向该 DOM 元素添加一个修饰符类来激活突出显示它。

到目前为止，我找到的每个答案都是使用 jQuery。

下面是我的 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');
  });
});

我也尝试过通过 id 使用 getAttribute，但我似乎无法确定它。

提前致谢。

Answer 1

只需从e.target.classList.add('.active'); 中删除.，例如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');
  });
});