本文介绍一种健壮的 JavaScript 方案，解决多页网站中导航菜单“首页不自动激活”等路径匹配问题，通过 URL 包含关系判断而非全等匹配，确保根路径（如 /）也能正确命中主页链接。
本文介绍一种健壮的 javascript 方案，解决多页网站中导航菜单“首页不自动激活”等路径匹配问题，通过 url 包含关系判断而非全等匹配，确保根路径（如 `/`）也能正确命中主页链接。
在构建多页静态网站时，常需为导航栏（
更可靠的做法是采用子串包含检测：判断当前完整 URL 是否包含导航链接的 href 值。这能自然兼容多种常见场景：
- 主页链接为 / → 匹配 https://site.com/、https://site.com/about/（⚠️注意：需进一步优化避免误匹配，见下文）
- 主页链接为 /index.html → 匹配 https://site.com/index.html
- 子页面链接为 /blog/ → 匹配 https://site.com/blog/ 或 https://site.com/blog/post1
以下是优化后的 jQuery 实现（兼容现代浏览器，亦可轻松转为原生 JS）：
$(function() {
const currentUrl = window.location.href;
$('.header-nav a').each(function() {
const linkUrl = this.href;
// 使用 indexOf 检查当前 URL 是否以该链接 URL 开头（更精准）
if (currentUrl.indexOf(linkUrl) === 0) {
$(this).addClass('header-nav__item__active');
}
});
});
✅ 关键改进说明：
- indexOf(...) === 0 替代 !== -1，确保链接 URL 是当前 URL 的前缀（如 /about/ 不会错误匹配 /about-us/），大幅提升准确性；
- 使用 window.location.href 显式声明变量，提升可读性与调试便利性；
- 避免硬编码 document.location（已过时，推荐 window.location）。
⚠️ 注意事项与进阶建议：
- 若导航中使用相对路径（如 about.html），浏览器会自动解析为绝对 URL，this.href 返回的是规范化的完整地址，可直接比较；
- 对于 SPA（单页应用），应改用路由库（如 React Router 的 useLocation 或 Vue Router 的 route.path）监听路由变化；
- 如需支持哈希路由（#section1）或查询参数（?ref=nav），建议统一提取 location.pathname 进行匹配，例如：
const path = window.location.pathname; // => "/blog/post1" if (path === this.getAttribute('href')) { /* ... */ }
最后，别忘了在 CSS 中定义激活样式：
.header-nav__item__active {
color: #30a5cc;
font-weight: 600;
position: relative;
}
.header-nav__item__active::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 3px;
background-color: #30a5cc;
}
通过以上方案，无论用户从首页直接访问，还是从其他页面跳转，导航栏均能精准、稳定地高亮当前所处页面，显著提升用户体验与网站专业度。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
