本文介绍如何在页面加载时自动高亮显示当前激活的导航菜单项，通过 JavaScript 动态添加 active 类并配合 CSS 实现背景色切换，解决单页跳转后样式丢失问题。
本文介绍如何在页面加载时自动高亮显示当前激活的导航菜单项，通过 javascript 动态添加 `active` 类并配合 css 实现背景色切换，解决单页跳转后样式丢失问题。
要实现导航栏中“当前页面对应菜单项”的背景色高亮（例如点击「Sport」进入 sport.html 后，该链接自动变为黑色背景+白色文字），关键在于：页面加载时即识别当前 URL 路径，并为匹配的 <a></a> 标签添加 active 类——而非仅依赖点击事件。因为用户直接访问 sport.html 时并不会触发 click，纯前端 JS 的点击逻辑无法生效。
✅ 正确实现方式：基于 URL 路径自动激活
以下代码应在每个 HTML 页面（如 sport.html、style.html）中引入，确保页面一加载就完成激活判断：
<!-- 在所有页面的 <head> 或 <body> 底部添加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const navLinks = document.querySelectorAll('nav.navbar a');
const currentPath = window.location.pathname;
navLinks.forEach(link => {
// 提取 href 中的文件名（如 "sport.html"）
const hrefPath = new URL(link.href).pathname;
// 若路径完全匹配（含 .html），则设为 active
if (hrefPath === currentPath) {
link.classList.add('active');
} else {
link.classList.remove('active'); // 确保其他项无 active
}
});
});
</script>
✅ 配套 CSS（增强可维护性）
请将原 CSS 中的 .navbar .active 规则更新为更精确的选择器（避免层级歧义），并补充过渡效果提升体验：
/* 推荐写法：明确作用于 nav 下的 a.active */
nav.navbar a.active {
background-color: #000;
color: #fff;
border-radius: 4px;
}
/* 可选：添加平滑过渡 */
nav.navbar a {
transition: background-color 0.2s ease, color 0.2s ease;
}
⚠️ 注意事项与最佳实践
-
不要依赖
click事件做跨页激活：click只在当前页有效，跳转后 JS 重载，状态丢失；必须用window.location.pathname在新页面中重新计算。 -
路径匹配需严谨：使用
new URL(link.href).pathname可正确解析绝对/相对路径，避免因/开头或子目录导致误判。 -
HTML 结构微调建议：将
<nav></nav>移至内（你当前代码中<nav></nav>在之后，属无效 HTML）。正确结构如下：<header>...</header><nav class="navbar"><ul> <li><a href="goodnews.html">Goodnews</a></li> <li><a href="sport.html">Sport</a></li> <!-- 其他项 --> </ul></nav> -
无障碍友好提示：可额外添加
aria-current="page"属性增强语义化：if (hrefPath === currentPath) { link.classList.add('active'); link.setAttribute('aria-current', 'page'); }
✅ 总结
实现导航栏“当前项高亮”的核心是 服务端不可控时的客户端路径感知。通过 window.location.pathname 匹配 <a></a> 的 href 路径，在 DOM 加载完成后自动标记 active，再由 CSS 渲染样式——这一模式稳定、无需后端支持、兼容所有静态站点。避免使用 jQuery 依赖或纯点击逻辑，确保用户体验一致且 SEO 友好。
