如何使用纯 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 项时，通过添加修饰符使选项卡处于活动状态 class 添加到那个 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');
  });
});

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

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

javascript

html

ecmascript-6

modifier