本文讲解如何通过 JavaScript 动态识别当前页面 URL，并自动为对应导航链接添加 active 类，从而实现跨页面的导航高亮效果，无需修改 HTML 结构或阻止默认跳转行为。
本文讲解如何通过 javascript 动态识别当前页面 url，并自动为对应导航链接添加 `active` 类，从而实现跨页面的导航高亮效果，无需修改 html 结构或阻止默认跳转行为。
在单页应用（SPA）中，使用 jQuery 的 .click() 事件配合 addClass("active") 可以轻松实现点击高亮；但在传统多页网站中，一旦用户点击 链接，浏览器会立即跳转到新页面——导致之前通过 JS 添加的 active 类在刷新后彻底丢失。你遇到的问题正是这个典型场景：JavaScript 绑定的点击逻辑无法跨页面持久化状态。
根本原因在于：前端脚本运行在当前页面上下文中，页面跳转即意味着 JS 执行环境重置。因此，不能依赖“点击时加类”这种客户端交互逻辑来维持导航高亮，而应改为在每个页面加载时，主动比对当前 URL 与导航链接地址，自动激活匹配项。
✅ 正确实现方式：基于 URL 自动激活
以下代码在 DOM 加载完成后，遍历所有 标签（你可根据需要缩小选择器范围，例如 ".nav.navbar-nav li a"），将每个链接的 href 属性值与 window.location.href 进行全量字符串匹配。若一致，则添加 active 类：
$(document).ready(function() {
$("a").each(function() {
// 注意：此处使用 prop("href") 获取解析后的绝对 URL，确保与 location.href 格式一致
if ($(this).prop("href") === window.location.href) {
$(this).addClass("active");
}
});
});配套 CSS（建议移除 !important，仅在必要时使用）：
.nav.navbar-nav li a.active {
background-color: #e74c3c;
color: white;
}? 关键说明：$(this).prop("href") 返回的是浏览器解析后的绝对 URL（如 https://example.com/about/），而 $(this).attr("href") 返回的是原始 HTML 中的相对路径（如 /about/）。二者格式不同，直接比较会导致匹配失败。因此必须使用 .prop("href") 保证语义一致性。
? 为什么 preventDefault() 不是解决方案？
如你在问题中尝试的那样，用 event.preventDefault() 拦截跳转虽能保留高亮，但牺牲了基本导航功能——用户无法访问目标页面。这违背了导航栏的核心目的，也不符合可访问性（a11y）和 SEO 原则。真正的高亮应是“结果导向”的（页面加载后生效），而非“交互导向”的（点击瞬间生效）。
⚠️ 注意事项与优化建议
- 选择器精准化：生产环境中请避免全局 $("a")，改用更具体的选择器（如 ".navbar-nav a" 或 ".main-nav a"），防止误匹配页脚、侧边栏等无关链接。
-
路径匹配增强（可选）：若需支持“子路径高亮”（如访问 /blog/post-1/ 时，/blog/ 导航项也高亮），可改用 startsWith() 判断：
const currentPath = window.location.pathname; if (currentPath.startsWith($(this).prop("pathname"))) { ... } - SEO 与服务端渲染友好：该方案纯前端实现，不依赖服务端模板，适用于静态站点、Jekyll、Hugo 或任何托管平台。
- jQuery 版本兼容性：示例使用 jQuery 3.x，若使用 1.x 或 2.x，请确保引入对应 CDN；现代项目推荐迁移到原生 JS（见下方替代方案）。
? 原生 JavaScript 替代方案（无 jQuery 依赖）
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('a').forEach(link => {
if (link.href === window.location.href) {
link.classList.add('active');
}
});
});✅ 总结
导航高亮的本质不是“记住用户点了谁”，而是“告诉用户现在在哪”。通过在每页初始化时依据 window.location.href 主动匹配并激活对应链接，即可优雅解决跨页面高亮问题。该方法零侵入、易维护、兼容性强，是多页网站导航状态管理的标准实践。
