如何使用 JavaScript 为导航菜单动态添加当前页面的高亮状态-html教程-PHP中文网

如何使用 JavaScript 为导航菜单动态添加当前页面的高亮状态

本文介绍如何通过 JavaScript（jQuery）精准识别当前页面 URL 并自动为对应导航链接添加 active 样式类，解决首页不被识别、路径匹配不准确等常见问题。

本文介绍如何通过 javascript（jquery）精准识别当前页面 url 并自动为对应导航链接添加 `active` 样式类，解决首页不被识别、路径匹配不准确等常见问题。

在构建多页网站时，为导航菜单项添加“当前页高亮”效果是提升用户体验的关键细节。你可能已尝试用 document.location.href === this.href 进行全量 URL 匹配，但会遇到典型问题：首页（如 https://example.com/）无法匹配导航中首页的链接，因为 window.location.href 通常包含协议、域名及尾部斜杠（如 https://example.com/），而 this.href 在某些浏览器中会被解析为完整绝对地址，也可能因重定向、端口或查询参数导致严格相等失败。

更健壮的方案是采用子字符串包含判断，而非完全相等：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

$(function() {
    var currentLocation = window.location.href;

    $('.header-nav a').each(function() {
        // 检查当前 URL 是否以该链接 href 开头（支持根路径 / 和子路径匹配）
        if (currentLocation.indexOf(this.href) === 0) {
            $(this).addClass('header-nav__item__active');
        }
    });
});

✅ 推荐升级版（兼顾根路径与语义化匹配）：
为避免误匹配（例如 /blog 错误匹配 /blog-post），建议结合 pathname 属性进行更精确的路径级比对：

$(function() {
    var currentPath = window.location.pathname;

    $('.header-nav a').each(function() {
        var linkPath = new URL(this.href, window.location.origin).pathname;
        // 精确匹配路径（自动处理 / 和 /index.html 等常见首页变体）
        if (linkPath === currentPath || 
            (linkPath === '/' && (currentPath === '/' || currentPath === '/index.html' || currentPath === '/index.htm'))) {
            $(this).addClass('header-nav__item__active');
        }
    });
});

? 注意事项：

确保 jQuery 已正确加载，且脚本在 DOM 就绪后执行（$(function(){...}) 已满足）；
若使用 HTML5 History API（如单页应用），需监听 popstate 事件并重新执行激活逻辑；
CSS 样式 .header-nav__item__active { color: #30a5cc; } 需确保优先级足够，必要时添加 !important 或调整选择器特异性；
建议将激活逻辑封装为可复用函数，便于后续扩展（如支持多级菜单、面包屑同步等）。

通过以上改进，无论用户从首页直接访问，还是通过内链跳转，导航栏都能准确标识当前所在页面，实现专业、可靠的视觉反馈。