如何用JavaScript检测当前页面并为对应菜单元素添加active类？

问题分析 #

你的需求是通过JavaScript检测当前页面，为对应侧边菜单项添加active类，但现有代码无法生效，主要存在HTML语法错误、路径匹配逻辑不兼容、代码执行时机错误这几个问题。

修复步骤 #

1. 修正HTML类名语法错误 #

原生HTML中定义类名的属性是class，而非className（className是React等前端框架的专属写法）。修改你的HTML代码：

<div>
  <ul>
    <li> <a href="link1.html" class="menuLink"> Page 1 </a></li>
    <li> <a href="link2.html" class="menuLink"> Page 2 </a></li>
    <li> <a href="link3.html" class="menuLink"> Page 3 </a></li>
  </ul>
</div>

2. 解决路径匹配不兼容问题 #

window.location.pathname返回的是当前页面的完整路径（例如/your-project/link1.html），而菜单链接的href是相对路径（link1.html），直接全等匹配会失败。推荐两种可靠的匹配方案：

方案一：提取文件名匹配

仅比较路径的最后一段（文件名），适合简单的单层级页面结构：

const currentPage = window.location.pathname.split('/').pop();

document.querySelectorAll('.menuLink').forEach(link => {
  if (link.getAttribute('href') === currentPage) {
    link.classList.add('active');
  }
});

方案二：使用URL对象解析绝对路径

适用于复杂层级的页面，能准确匹配绝对路径，兼容性更强：

const currentUrl = new URL(window.location.href);

document.querySelectorAll('.menuLink').forEach(link => {
  const linkUrl = new URL(link.href, window.location.origin);
  if (linkUrl.pathname === currentUrl.pathname) {
    link.classList.add('active');
  }
});

3. 确保代码在DOM加载完成后执行 #

如果JavaScript代码放在<head>标签中，会在DOM元素渲染前执行，导致无法找到.menuLink元素。解决方法二选一：

• 将代码移至</body>标签之前；
• 用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', () => {
  const currentUrl = new URL(window.location.href);

  document.querySelectorAll('.menuLink').forEach(link => {
    const linkUrl = new URL(link.href, window.location.origin);
    if (linkUrl.pathname === currentUrl.pathname) {
      link.classList.add('active');
    }
  });
});

内容的提问来源于stack exchange，提问作者Aljaž Štrukelj