如何为导航栏菜单元素添加active类并仅保留当前选中项高亮

问题根源 #

你现有代码的问题是点击菜单项时仅处理了当前点击元素的active类状态，没有先清空所有其他导航项的激活类，导致多个元素同时持有active类，出现多个高亮项的问题。
另外你原代码里的if(item.className === "active")判断存在逻辑漏洞：如果li元素有其他自定义类名，该全等判断会直接失效，且classList.remove方法调用时如果元素没有对应类也不会抛出异常，不需要提前做存在性判断。

修复代码 #

HTML结构（无需修改） #

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

JS逻辑 #

// 预获取所有导航li元素，避免重复查询DOM
const navItems = document.querySelectorAll('nav ul li');

navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 统一移除所有导航项的active类
    navItems.forEach(nav => nav.classList.remove('active'));
    // 仅给当前点击项添加active类
    item.classList.add('active');
  });
})

实现逻辑 #

• 每次点击任意导航项时，先全局清空所有导航的激活状态，保证此时没有任何高亮项
• 仅给当前触发点击事件的菜单项添加激活类，最终实现同一时间只有一个选中项的效果

内容的提问来源于stack exchange，提问作者bran