javascript - 将活动类添加到菜单上的元素

Question

我正在寻找向我的导航栏添加一个活动元素类，当我选择下一个链接时，前一个链接保持突出显示，我只希望当前链接保持活动状态。

请参见下面的代码：

 <header>
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">service</a></li>
      <li><a href="#">profile</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

    
document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', event => {
    alert(item.outerHTML);
    if(item.className === "active"){
    item.classList.remove("active");
    }
    item.classList.add("active");

  });

})

https://jsfiddle.net/9xca1pgh/42/

标签： javascripthtmlnavbar

Answer 1

您可以从所有li元素中删除活动类并将活动类添加到当前元素

document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', event => {
    document.querySelectorAll('li').forEach(i => {i.classList.remove('active')})
    item.classList.add('active')
  })
})

如果你想使用 for 循环

for(let item of document.querySelectorAll('li')) {
  item.addEventListener('click', event => {
    // Remove active class from all li
    for(let i of document.querySelectorAll('li')) {
      i.classList.remove('active')
    }
    item.classList.add('active')
  })
}