求助：使用e.preventDefault()后无法同时添加类并触发a标签href跳转

我用HTML和CSS制作了菜单栏，需求是：点击任意菜单项时，给对应项添加mw-menu-active类，同时让<a>标签的href正常跳转。但目前点击菜单项后，href完全无法跳转。

我的HTML代码 #

<div class="main-header">
      <h2><a href="index.html"> Javascript All projects </a></h2>
    </div>
    <div id="main-content">
      <div class="menu-bar-all-project">
        <ul>
          <li class="single-menu-class">
            <a href="index.html"> 1. Stopwatch </a>
          </li>
          <li class="single-menu-class">
            <a href="2_watch.html"> 2. Watch </a>
          </li>
          <li class="single-menu-class">
            <a href="3_countdown.html"> 3. Countdown </a>
          </li>
          <li class="single-menu-class">
            <a href="4_accordion.html"> 4. Accordion </a>
          </li>
          <li class="single-menu-class">
            <a href="5_popup.html"> 5. Popup </a>
          </li>
          <li class="single-menu-class">
            <a href="6_calculator.html"> 6. Calculator </a>
          </li>
        </ul>
      </div>

我的JavaScript代码 #

const mwMenuItem = document.querySelectorAll(".single-menu-class");
for (let i = 0; i < mwMenuItem.length; i++) {
  mwMenuItem[i].addEventListener("click", (e) => {
    for (let j = 0; j < mwMenuItem.length; j++) {
      if (i == j) {
        mwMenuItem[j].classList.toggle("mw-menu-active");
      } else {
        mwMenuItem[j].classList.remove("mw-menu-active");
      }
    }
    e.preventDefault();
  });
}

问题原因 #

代码里的e.preventDefault()会直接阻止浏览器的默认行为——也就是<a>标签的跳转动作，这就是href无法生效的核心原因。另外toggle方法在这里没必要，因为页面跳转后会重新加载，之前的类状态会被重置。

修正方案 #

移除e.preventDefault()，同时简化逻辑，先清除所有菜单项的激活类，再给当前点击项添加类：

const mwMenuItem = document.querySelectorAll(".single-menu-class");

// 点击菜单项时添加激活类并允许跳转
mwMenuItem.forEach(item => {
  item.addEventListener("click", () => {
    // 移除所有菜单项的激活类
    mwMenuItem.forEach(menu => menu.classList.remove("mw-menu-active"));
    // 给当前点击的菜单项添加激活类
    item.classList.add("mw-menu-active");
  });
});

// 可选：页面加载时自动匹配当前页面的菜单项，添加激活类
const currentPage = window.location.pathname.split("/").pop();
mwMenuItem.forEach(item => {
  const link = item.querySelector("a");
  if (link.getAttribute("href") === currentPage) {
    item.classList.add("mw-menu-active");
  }
});

这段代码做了两件事：

1. 点击菜单项时，先清除所有项的激活状态，再给当前项加上mw-menu-active，同时不阻止跳转，让<a>标签正常工作。
2. 页面加载时，根据当前URL自动给对应菜单项添加激活类，解决页面刷新后激活状态丢失的问题。

内容的提问来源于stack exchange，提问作者S A Faroque