本文介绍一种健壮的 jQuery 导航激活逻辑：通过解析当前 URL 的文件名（而非完整路径或带参数的 URL）匹配 元素的 data-target 属性，确保如 sub01.html?page=2 或 sub01.html#section 等变体 URL 仍能正确激活对应菜单项。

本文介绍一种健壮的 jquery 导航激活逻辑：通过解析当前 url 的文件名（而非完整路径或带参数的 url）匹配 `

` 元素的 `data-target` 属性，确保如 `sub01.html?page=2` 或 `sub01.html#section` 等变体 url 仍能正确激活对应菜单项。

在实际开发中，当用户点击带查询参数（如 ?page=2）、片段标识符（如 #top）或 HTML 实体编码（如 &page=2）的链接时，原始基于 href === location.href 的精确匹配会失效——因为 sub01.html 和 sub01.html?page=2 是两个不同的字符串。而本方案的核心思想是：忽略 URL 中的协议、域名、路径层级、查询参数和哈希值，仅提取末端文件名（如 sub01.html），再剥离扩展名，得到语义化的目标标识（如 sub01），最后与

的 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');
});

✅ 关键改进点说明：

Grammarly

Grammarly是一款面向英文写作的 AI 语法检查、改写、语气调整和生成式写作助手。

下载

• 使用 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 选择器解析错误。

⚠️ 注意事项：

• 确保所有
• 标签的 data-target 值与对应页面文件名（不含扩展名）完全一致，例如 sub02.html 对应 data-target="sub02"；
• 若存在同名不同扩展名的页面（如 sub01.html 和 sub01.php），需统一命名规范或扩展匹配逻辑（如支持多后缀正则）；
• 该逻辑不依赖 的具体值，因此即使链接写成 href="./sub01.html" 或 href="https://example.com/sub01.html"，只要 data-target 正确，依然生效。

此方案简洁、鲁棒、易维护，彻底解决了 URL 动态参数导致导航失活的问题，是静态站点或轻量级 SPA 中推荐的导航高亮实践。