本文介绍一种健壮的 jQuery 导航激活逻辑：通过解析当前 URL 的文件名（而非完整路径或带参数的 URL）匹配 <li> 元素的 data-target 属性，确保如 sub01.html?page=2 或 sub01.html#section 等变体 URL 仍能正确激活对应菜单项。
本文介绍一种健壮的 jquery 导航激活逻辑：通过解析当前 url 的文件名（而非完整路径或带参数的 url）匹配 `
在实际开发中，当用户点击带查询参数（如 ?page=2）、片段标识符（如 #top）或 HTML 实体编码（如 &page=2）的链接时，原始基于 href === location.href 的精确匹配会失效——因为 sub01.html 和 sub01.html?page=2 是两个不同的字符串。而本方案的核心思想是：忽略 URL 中的协议、域名、路径层级、查询参数和哈希值，仅提取末端文件名（如 sub01.html），再剥离扩展名，得到语义化的目标标识（如 sub01），最后与 <li> 的 data-target 值比对。
以下是优化后的完整脚本（兼容性更强、逻辑更清晰）：
$(document).ready(function() {
// 获取当前页面路径（不含协议、域名、查询参数和哈希）
const pathname = window.location.pathname;
// 提取最后一段（如 "/link/sub01.html" → "sub01.html"）
const filename = pathname.split('/').pop();
// 剥离扩展名，获取基础标识符（如 "sub01.html" → "sub01"）
const baseName = filename.split('.')[0];
// 查找 data-target 匹配的 li 元素并添加 active 类
$('#Nav .Cate li').filter(function() {
return $(this).data('target') === baseName;
}).addClass('active');
// 可选：同时移除其他 li 的 active 类，确保唯一激活（防多选）
$('#Nav .Cate li').not('.active').removeClass('active');
});✅ 关键改进点说明：
- 使用 window.location.pathname 而非 location.href，天然排除 ?, #, & 等干扰；
- split('/').pop() 安全获取文件名，不受多级目录影响（如 /a/b/c/sub01.html 仍可正确提取）；
- split('.')[0] 剥离 .html（或 .php, .jsp 等）后缀，使 data-target="sub01" 与 sub01.html 精确对应；
- 利用 jQuery 的 .data() 方法读取 data-target，语义清晰且自动处理大小写与空格；
- .filter() + .addClass() 组合替代原生属性选择器，避免因特殊字符导致的 CSS 选择器解析错误。
⚠️ 注意事项：
- 确保所有 <li> 标签的 data-target 值与对应页面文件名（不含扩展名）完全一致，例如 sub02.html 对应 data-target="sub02"；
- 若存在同名不同扩展名的页面（如 sub01.html 和 sub01.php），需统一命名规范或扩展匹配逻辑（如支持多后缀正则）；
- 该逻辑不依赖 <a href> 的具体值，因此即使链接写成 href="./sub01.html" 或 href="https://example.com/sub01.html"，只要 data-target 正确，依然生效。
此方案简洁、鲁棒、易维护，彻底解决了 URL 动态参数导致导航失活的问题，是静态站点或轻量级 SPA 中推荐的导航高亮实践。
