如何为点击元素添加active类并移除其他兄弟元素的active类

你的原有代码仅对当前点击的元素做类名切换，没有处理其他兄弟元素的active类状态，因此会出现多个元素同时带有active类的问题。可以参考以下两种方案修改：

方案1：全量遍历清空（逻辑简单，适合列表项少的场景） #

let navItems = document.querySelectorAll('li');

navItems.forEach(navItem => {
  navItem.addEventListener('click', () => {
    // 先记录当前点击元素的激活状态
    const isCurActive = navItem.classList.contains('active');
    // 遍历所有导航项，统一移除active类
    navItems.forEach(item => item.classList.remove('active'));
    // 非激活状态下才添加，实现点击已激活项可取消选中的效果
    // 若要求必须保留一个激活项，直接执行navItem.classList.add('active')即可，无需判断
    if (!isCurActive) {
      navItem.classList.add('active');
    }
  });
});

方案2：定向查找激活项修改（性能更优，适合列表项多的场景） #

无需遍历全部列表项，直接查找当前已激活的元素修改即可：

let navItems = document.querySelectorAll('li');

navItems.forEach(navItem => {
  navItem.addEventListener('click', () => {
    // 找到当前已激活的元素，移除active类
    const activeItem = document.querySelector('li.active');
    if (activeItem) activeItem.classList.remove('active');
    // 点击的不是原本激活的元素才添加，实现点击已激活项可取消的效果
    if (activeItem !== navItem) {
      navItem.classList.add('active');
    }
  });
});

注意事项 #

如果页面存在多个列表，建议给目标导航的ul添加专属类名（比如class="nav"），将选择器修改为document.querySelectorAll('.nav li')，避免选中其他无关的li元素导致逻辑异常。

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