本文讲解如何通过 JavaScript 动态识别当前页面 URL，并自动为对应导航链接添加 active 类，从而实现页面跳转后导航项持续高亮的效果，无需修改 HTML 结构或阻止默认跳转行为。
本文讲解如何通过 javascript 动态识别当前页面 url，并自动为对应导航链接添加 `active` 类，从而实现页面跳转后导航项持续高亮的效果，无需修改 html 结构或阻止默认跳转行为。
在单页应用（SPA）中，使用 jQuery 监听点击并手动切换 active 类是可行的；但在传统多页网站（MPA）中，页面每次跳转都会触发完整刷新——这意味着 JavaScript 事件监听器和内存状态（如 activeMenuItem 变量）将被重置，导致“点击高亮”瞬间失效。你遇到的问题正是这一机制的典型表现：点击后页面跳转，脚本重新执行，但无人告诉它“现在该高亮哪个链接”。
正确的解决思路不是在点击时设 active，而是在每个新页面加载完成时，主动比对当前 URL 与各导航链接的 href 值，自动标记匹配项。这无需干预用户跳转行为，完全兼容标准 标签语义，也无需服务端配合或修改 HTML 源码。
以下是推荐的实现方案（基于 jQuery）：
$(document).ready(function() {
// 精确匹配：仅对导航区域内的链接生效（可按需调整选择器）
$('.nav.navbar-nav li a').each(function() {
const $link = $(this);
const linkHref = $link.prop('href');
const currentUrl = window.location.href;
// 注意：href 属性返回的是绝对 URL，因此直接与 location.href 比较安全
if (linkHref === currentUrl) {
$link.addClass('active');
}
});
});? 关键说明：
- 使用 .prop('href')（而非 .attr('href')）可获取浏览器解析后的绝对 URL，避免相对路径比较失败；
- 选择器 '.nav.navbar-nav li a' 与你的原始 CSS 规则一致，确保样式精准作用于目标元素；
- 此逻辑在 $(document).ready() 中执行，保证 DOM 加载完成后立即处理，无需等待用户交互。
✅ 配套 CSS（建议移出内联样式，放入外部样式表）：
.nav.navbar-nav li a.active {
background-color: #e74c3c !important;
color: white !important;
}⚠️ 注意事项：
- 若网站存在 URL 重写（如 /about → /about/）、查询参数（?ref=nav）或哈希路由（#section1），需增强匹配逻辑（例如使用 location.pathname + 正则匹配）；
- 避免全局 $("a") 选择器，防止误标页脚、侧边栏等非导航链接；
- 如需支持子目录匹配（如当前页 /blog/post1 时高亮 /blog 导航项），可改用 location.pathname.startsWith(...) 判断；
- 确保已正确引入 jQuery（推荐使用 CDN 版本，如 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>）。
总结来说，导航高亮的本质是状态同步问题：前端需在每次页面加载时，将 UI 状态（active 样式）与路由状态（当前 URL）对齐。这种方法稳定、无副作用、易于维护，是多页网站导航高亮的标准实践。
