母版页菜单页面导航后Active Class失效问题咨询

这个问题太常见啦！本质是页面跳转后会完全重新加载母版页的资源，你之前的jQuery只处理了点击瞬间的active类切换，但刷新后页面回到初始的HTML状态，默认的active项自然就又冒出来了。咱们得让页面加载时就自动识别当前页面，给对应的菜单项加上active类，而不是只依赖点击事件。下面给你两个实用的解决方案：

方案1：根据当前URL路径匹配菜单锚点（最通用） #

核心思路是页面加载时，获取当前页面的URL路径，自动匹配对应href的菜单项，给它加上active类，同时移除其他项的active状态。

修改后的jQuery代码如下：

$(document).ready(function() {
    // 页面加载时：根据当前URL自动设置active类
    var currentPagePath = window.location.pathname;
    
    // 遍历所有菜单锚点，匹配对应路径
    $('.menu-item a').each(function() {
        var menuHref = $(this).attr('href');
        // 用indexOf匹配（适配带参数的URL，比如/Product/Detail/123）
        if (currentPagePath.indexOf(menuHref) !== -1) {
            $('.menu-item').removeClass('active');
            $(this).closest('.menu-item').addClass('active');
            return false; // 找到匹配项后立即退出循环，提升性能
        }
    });

    // 保留原有的点击事件逻辑，确保点击时的即时反馈
    $('.menu-item').click(function() {
        $('.menu-item').removeClass('active');
        $(this).addClass('active');
    });
});

代码说明： #

• window.location.pathname会获取当前页面的路径部分（比如http://yourdomain.com/Home/About的pathname是/Home/About）
• 遍历所有菜单的a标签，对比href与当前路径，匹配成功后给父列表项添加active类
• 点击事件逻辑保留，保证用户点击菜单时能立刻看到状态变化

方案2：用自定义属性标记菜单与页面（适配复杂路由） #

如果你的菜单href带参数、或者路由规则比较特殊，用路径匹配容易出错，可以给每个菜单项加自定义属性，比如data-page，再根据当前页面标识匹配。

示例菜单HTML：

<ul class="main-menu">
    <li class="menu-item active" data-page="Home"><a href="/Home">首页</a></li>
    <li class="menu-item" data-page="About"><a href="/About/Us">关于我们</a></li>
    <li class="menu-item" data-page="Contact"><a href="/Contact/Form">联系我们</a></li>
</ul>

对应jQuery代码：

$(document).ready(function() {
    // 从URL的最后一段提取页面标识（可根据你的路由规则调整）
    var currentPage = window.location.pathname.split('/').pop();
    // 处理首页路径为"/"的情况
    if (!currentPage) currentPage = "Home";

    // 根据自定义属性匹配并设置active
    $('.menu-item').removeClass('active');
    $('.menu-item[data-page="' + currentPage + '"]').addClass('active');

    // 保留点击事件逻辑
    $('.menu-item').click(function() {
        $('.menu-item').removeClass('active');
        $(this).addClass('active');
    });
});

注意事项： #

• 如果是ASP.NET等后端框架，确保菜单的href用~/生成绝对路径，避免相对路径匹配错误
• 如果路由带参数（比如/Order/Detail/1001），可以只匹配路径的前半部分，比如currentPagePath.startsWith('/Order/Detail')
• 测试时记得清除浏览器缓存，避免旧JS代码干扰效果

内容的提问来源于stack exchange，提问作者CHUHA