点击导航同级菜单项时移除旧项的active类

我明白你遇到的问题了——点击导航里的不同菜单项时，旧选中项的active类没被移除，导致多个菜单项同时高亮，对吧？咱们来一步步捋清楚问题，然后给出修复方案。

可能的问题根源 #

从你的描述来看，点击body能正常清除所有active类，说明清除逻辑本身是可行的，问题大概率出在菜单项点击事件的执行顺序或选择器覆盖范围上：

• 你遍历菜单项的选择器可能没覆盖所有同级项，导致旧的active项没被选中清除
• 事件冒泡干扰了逻辑：点击菜单项时，事件传到body触发了清除，可能你没做阻止，导致刚加上的active又被立刻移除（不过你说新项能加上，这点可能性稍低）
• 清除旧类的代码执行时机不对，比如在添加新类之后才执行，或者遍历过程中出现了遗漏

修复方案：统一清除逻辑+阻止冒泡 #

咱们把“清除所有菜单项active类”的逻辑抽成独立函数，保证菜单项切换和点击body用同一套逻辑，同时处理事件冒泡的问题，具体代码如下：

示例HTML结构 #

<nav class="main-nav">
  <a href="#" class="nav-link active">首页</a>
  <a href="#" class="nav-link">产品</a>
  <a href="#" class="nav-link">关于我们</a>
</nav>

修复后的JavaScript代码 #

// 1. 获取所有目标元素
const navLinks = document.querySelectorAll('.nav-link');
const pageBody = document.querySelector('body');

// 2. 封装清除active类的通用函数
function removeAllActiveClasses() {
  navLinks.forEach(link => {
    link.classList.remove('active');
  });
}

// 3. 绑定菜单项点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止事件冒泡到body，避免刚加的active被立刻清除
    e.stopPropagation();
    // 先清除所有旧的active类
    removeAllActiveClasses();
    // 再给当前点击项添加active类
    this.classList.add('active');
  });
});

// 4. 绑定body点击事件
pageBody.addEventListener('click', function() {
  removeAllActiveClasses();
});

关键细节说明 #

• 统一清除逻辑：把清除操作做成独立函数，既避免重复代码，也保证菜单项切换和点击body的清除行为完全一致，不会出现逻辑偏差
• 阻止事件冒泡：在菜单项点击事件里加入e.stopPropagation()，防止点击事件传到body触发清除逻辑，导致刚加上的active类被立刻移除
• 确保选择器准确：querySelectorAll('.nav-link')要能选中所有同级菜单项，如果你的菜单项用了其他类名或标签，记得对应修改选择器

你可以试试这个方案，应该就能解决旧菜单项active类未被移除的问题了。

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