菜单active类无法移除求助：分配新active类时旧类未删除

看起来你遇到的核心问题是重复使用了相同的ID，这违反了HTML规范（ID必须是页面唯一的），导致你的选择器无法正确定位到所有菜单项。让我一步步帮你解决：

问题分析 #

你的HTML里所有<li>都用了同一个id="menu-item"，这会带来两个关键问题：

• document.querySelector('#menu-item.active')只会找到第一个带active类的<li>，后面的菜单项就算有active类也无法被选中移除。
• 虽然document.querySelectorAll('#menu-item')能选中所有元素，但重复ID是不符合规范的行为，浏览器的处理逻辑可能存在不一致性。

另外，你的URL匹配逻辑也有潜在隐患：anchor.href会返回完整的绝对URL（比如https://yourdomain.com/home），如果window.location.href带有额外的参数、哈希或者末尾斜杠，很可能会导致匹配失败。

修复方案 #

1. 修正HTML的重复ID问题 #

把所有<li>的重复ID去掉，直接依赖menu-item类来选择元素（推荐这种方式，因为菜单项是一组同类型元素）：

<ul id="avia-menu" class="menu av-main-nav">
  <li class="menu-item">
    <a href="/home">
      <span class="avia-bullet"></span>
      <span class="avia-menu-text">Home</span>
      <span class="avia-menu-fx">
        <span class="avia-arrow-wrap">
          <span class="avia-arrow"></span>
        </span>
      </span>
    </a>
  </li>
  <li class="menu-item">
    <a href="/about">
      <span class="avia-bullet"></span>
      <span class="avia-menu-text">About</span>
      <span class="avia-menu-fx">
        <span class="avia-arrow-wrap">
          <span class="avia-arrow"></span>
        </span>
      </span>
    </a>
  </li>
  <li class="menu-item">
    <a href="/contact">
      <span class="avia-bullet"></span>
      <span class="avia-menu-text">Contact</span>
      <span class="avia-menu-fx">
        <span class="avia-arrow-wrap">
          <span class="avia-arrow"></span>
        </span>
      </span>
    </a>
  </li>
</ul>

2. 修改JavaScript逻辑 #

更新选择器为类选择器，并优化URL匹配逻辑（用pathname比较，避免完整URL的干扰）：

function updateMenu(location) {
  // 移除所有菜单项的active类
  const activeItems = document.querySelectorAll('.menu-item.active');
  activeItems.forEach(item => item.classList.remove('active'));

  // 找到匹配当前路径的菜单项并添加active类
  const menuItems = document.querySelectorAll('.menu-item');
  menuItems.forEach(item => {
    const anchor = item.querySelector('a');
    // 统一解析锚点的路径名，避免相对/绝对路径差异
    const anchorPath = new URL(anchor.href, window.location.origin).pathname;
    if (location.pathname === anchorPath) {
      item.classList.add('active');
    }
  });
}

// 直接传入window.location对象，方便获取路径名
updateMenu(window.location);

额外说明 #

• 用document.querySelectorAll('.menu-item.active')可以一次性选中所有带active类的菜单项，确保所有旧的active类都被移除。
• 使用URL对象解析锚点路径，能统一处理相对路径和绝对路径的问题，避免因为URL格式差异导致匹配失败。

这样修改后，旧的active类就能被正确移除，新的active类也能准确添加到对应的菜单项上了。

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