本文讲解如何通过 JavaScript 动态识别当前页面 URL，并自动为对应导航链接添加 active 类，解决单页逻辑无法跨页面持久化高亮的问题，无需修改 HTML 结构，兼容传统多页网站。
本文讲解如何通过 javascript 动态识别当前页面 url，并自动为对应导航链接添加 `active` 类，解决单页逻辑无法跨页面持久化高亮的问题，无需修改 html 结构，兼容传统多页网站。
在传统多页网站中，常见的导航高亮失效问题源于一个根本事实：页面跳转会触发浏览器完全刷新，导致 JavaScript 内存状态（如 activeMenuItem 变量）被清空。你最初使用的点击事件监听方案虽然能临时加 active 类，但一旦链接跳转完成、新页面加载，所有 JS 状态重置，高亮自然消失——这并非代码错误，而是浏览器行为的必然结果。
要实现“跳转后仍高亮”，关键不是拦截点击，而是在每个页面加载完成后，主动比对当前 URL 与导航链接的 href，自动标记匹配项。以下是推荐的稳健实现方案：
✅ 正确做法：基于 URL 的动态激活
<style>
.nav.navbar-nav li a.active {
background: red !important;
color: white !important;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 精准选择导航链接（避免误匹配其他 a 标签）
$('.nav.navbar-nav li a').each(function() {
const $link = $(this);
const linkHref = $link.prop('href');
// 注意：window.location.href 包含协议、域名、路径及可能的 hash/query
// 若需忽略查询参数或哈希，可使用 new URL(linkHref).pathname 进行标准化比对
if (linkHref && linkHref === window.location.href) {
$link.addClass('active');
}
});
});
</script>? 提示：若导航链接是相对路径（如 /about），而 window.location.href 是完整 URL（如 https://example.com/about），直接全等比较会失败。此时建议统一用路径部分比对：
const currentPath = new URL(window.location.href).pathname; const linkPath = new URL($link.prop('href'), window.location.origin).pathname; if (linkPath === currentPath) { ... }
⚠️ 注意事项与最佳实践
- 选择器要精准：避免使用泛化的 $("a")，否则可能误为页脚、广告等非导航链接添加 active 类。应限定为 .nav.navbar-nav li a 或你实际的导航容器选择器。
- href 属性必须存在且规范：确保 HTML 中 的值是有效 URL；空 href="#" 或 javascript:void(0) 将无法匹配。
- 不依赖 preventDefault()：该方案完全不阻止默认跳转行为，用户体验与 SEO 均不受影响。
- 无需服务端支持或 HTML 修改：纯前端实现，符合你“无法修改 HTML 结构”的约束条件。
- 兼容性友好：jQuery 3.3+ 支持主流浏览器，如需无依赖版本，可用原生 document.querySelectorAll() + Array.from() 替代。
✅ 总结
导航高亮的本质是「状态同步」，而非「事件记忆」。与其试图在跳转前保存状态，不如在每次页面加载后，依据 URL 这一可靠信源实时计算并应用状态。这一模式简洁、健壮、可维护，是多页网站导航高亮的标准解法。
