本文讲解如何通过 jQuery 智能匹配 URL 路径中的文件名（如 sub01.html），忽略查询参数（如 ?page=2 或 &page=2），并根据 data-target 属性精准为对应导航项添加 active 类，确保页面跳转后高亮状态始终准确。
本文讲解如何通过 jquery 智能匹配 url 路径中的文件名（如 `sub01.html`），忽略查询参数（如 `?page=2` 或 `&page=2`），并根据 `data-target` 属性精准为对应导航项添加 `active` 类，确保页面跳转后高亮状态始终准确。
当前代码存在两个关键问题：
- 原逻辑 $('#Nav .Cate li a[href="' + 'data-target' + '"]') 错误地将字符串 "data-target" 当作 href 值进行匹配，而非读取元素的 data-target 属性；
- 使用 this.href == url 进行全量 URL 精确比对，无法兼容带查询参数（如 sub01.html?page=2）或 HTML 实体编码（如 &page=2）的 URL，导致 active 类丢失。
✅ 正确思路是：从 window.location.pathname 提取末级路径片段（如 sub01.html），再提取其基础名称（如 sub01），最后匹配 <li> 元素的 data-target 属性值。
以下是优化后的完整脚本（兼容性更强、逻辑更健壮）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function() {
// 获取当前路径（不含协议、域名、查询参数和哈希）
const pathname = window.location.pathname;
// 提取末级文件名，例如 "/link/sub01.html" → "sub01.html"
const filename = pathname.substring(pathname.lastIndexOf('/') + 1);
// 去除扩展名，例如 "sub01.html" → "sub01"
const targetName = filename.replace(/\.[^/.]+$/, '');
// 查找 data-target 匹配的 <li> 并添加 active 类
$('#Nav .Cate li').filter(function() {
return $(this).data('target') === targetName;
}).addClass('active');
});? 关键改进说明：
- 使用 window.location.pathname 替代 window.location，天然排除查询参数（?...）、片段标识（#...）及编码干扰；
- 用 substring() + lastIndexOf('/') 安全获取文件名，避免正则误判路径层级；
- 用 replace(/\.[^/.]+$/, '') 移除扩展名（支持 .html、.php、.htm 等），比硬编码截取更鲁棒；
- 直接筛选 <li> 元素（而非 <a>），符合 HTML 结构语义（data-target 在 li 上），并精准添加 active 类到容器上；
- 使用 $(this).data('target') 正确读取 data-target 属性值（jQuery 自动处理大小写与连字符转换）。
⚠️ 注意事项：
- 确保所有导航 <li> 元素均正确设置了 data-target 属性（如 <li data-target="sub01">），且值与目标页面文件名前缀一致；
- 若页面部署在子目录（如 /myapp/sub01.html），pathname 仍能准确解析，无需额外配置；
- 该方案不依赖 href 属性值，因此即使 <a href> 内容被动态修改或包含相对/绝对路径差异，也不影响激活逻辑；
- 如需同时支持「首页」（如 index.html 或根路径 /），可在 targetName 为空时设为 'index'：
const targetName = filename.replace(/\.[^/.]+$/, '') || 'index';
此方案简洁、可维护性强，彻底解决因 URL 查询参数导致导航高亮失效的问题，适用于各类静态站点或轻量级 CMS 前端导航管理。
