如何实现导航栏当前页面active类常驻底部边框效果

核心特性 #

• 100%兼容你已实现的a标签点击动画、动画完成自动跳转逻辑，无冲突
• 全页面通用，index.html、contact.html、about.html、job.html等所有导航结构一致的页面都可以复用同一段代码，不用单独修改每个页面的导航静态类
• 直接复用你已经写好的a.active底部边框高亮样式，不需要调整CSS规则

操作步骤 #

把下面这段JS代码插入到所有页面的</body>闭合标签之前即可：

document.addEventListener('DOMContentLoaded', () => {
  // 若你的导航容器有专属类名，比如class="nav-bar"，可将选择器替换为'.nav-bar a'，避免选中页脚等其他位置的链接
  const allNavLinks = document.querySelectorAll('nav a');
  // 提取当前访问页面的文件名，根路径访问自动适配index.html
  const currentPage = window.location.pathname.split('/').pop() || 'index.html';

  allNavLinks.forEach(link => {
    const linkTarget = link.getAttribute('href').split('/').pop();
    if (linkTarget === currentPage) {
      link.classList.add('active');
    }
  });
});

适配说明 #

• 代码仅在页面初始加载时执行一次，给匹配当前路径的导航链接追加active类，不会拦截点击事件、不会修改你原有动画和跳转的触发逻辑
• 支持域名直接访问根路径（即不显示index.html后缀）的场景，首页高亮不会失效
• 如果你的导航链接带查询参数、hash锚点，只要href里的页面文件名和当前页一致就能正常匹配，不需要额外修改规则

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