统一母版页左侧固定导航栏按当前页面自动激活对应菜单项问题求助

解决方案 #

前提调整：补全导航链接的跳转地址 #

首先把HTML导航项中a标签的href="#"替换为你实际页面对应的真实路径，示例：

<li class="nav-item">
  <a href="/index.html" class="nav-link">
    <i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
    <span class="link-text">Nav 1</span>
  </a>
</li>
<li class="nav-item">
  <a href="/course.html" class="nav-link">
    <i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
    <span class="link-text">Nav 2</span>
  </a>
</li>
<!-- 其余导航项同理替换为对应页面路径 -->

新增JS逻辑动态匹配激活项 #

在页面底部（或DOM加载完成后）加入以下JS代码，自动识别当前页面路径并给对应导航项添加active类：

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取当前页面的路径
  const currentPath = window.location.pathname;
  // 获取所有导航链接
  const navLinks = document.querySelectorAll('.nav-link');
  
  // 遍历所有导航链接
  navLinks.forEach(link => {
    // 若不需要logo项触发高亮，可取消下方注释
    // if(link.parentElement.classList.contains('logo')) return;
    // 兼容相对/绝对路径，统一转换为标准路径对比
    const linkPath = new URL(link.href).pathname;
    // 匹配路径，包含子路径场景也可以命中
    if(currentPath === linkPath || currentPath.startsWith(linkPath)) {
      // 先移除所有导航项的active类，避免多个项同时激活
      navLinks.forEach(l => l.classList.remove('active'));
      // 给匹配到的导航项加active类
      link.classList.add('active');
    }
  })
})

特殊场景适配 #

• 如果是hash路由的单页应用（URL带#），把获取路径的代码替换为const currentPath = window.location.hash.slice(1)即可
• 如果是锚点导航（同一页面内跳转不同锚点），可以额外监听hashchange事件，触发时重新执行匹配逻辑即可
• 如果你的路径有公共前缀，可根据实际场景调整路径匹配的规则即可

你的现有CSS已经定义了.nav-item .active的高亮样式，不需要额外修改CSS，直接使用上述方案即可实现自动高亮效果。

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