将活动 class 添加到菜单上的元素

Question

我想在我的导航栏中添加一个活动元素 class，当我 select 下一个 link 前一个保持突出显示时，我只想要当前 link 保持活跃。

查看下面的代码：

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

Answer 1

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

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

Answer 2

因为活动中的项目是针对此

本身的，所以您需要找到活动标签并将其删除。

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

  });

})

将活动 class 添加到菜单上的元素

Adding active class to element on menu

html

javascript

navbar