JavaScript实现侧边栏当前项高亮失效问题排查

问题场景 #

尝试实现侧边栏菜单当前项高亮，使用以下HTML代码：

<ul class="app-menu">
        <li><a class="app-menu__item" href="@Url.Action("Index","Home")">Accueil</a></li>
        <li><a class="app-menu__item" href="#">Categories</a></li>
        <li><a class="app-menu__item" href="@Url.Action("Index","Stock")">Stock</a></li>
        <li><a class="app-menu__item" href="@Url.Action("Index","Article")">Article</a></li>
</ul>

搭配的JavaScript代码：

<script>
    $(".app-menu li a").click(function () {
        $(".app-menu li a.active").removeClass("active");
        $(this).addClass("active");
    });
</script>

但上述代码无法正常实现高亮效果，问题出在以下几点：

核心问题分析 #

1. 页面跳转重置JS效果 #

除了Categories是锚点链接（href="#"），其余菜单项都是指向不同后端Action的跳转链接。点击这类链接时，浏览器会重新加载新页面，之前通过JS添加的active类会随着页面刷新完全消失，无法保留高亮状态。

2. 初始页面无高亮状态 #

页面首次加载时，没有为当前页面对应的菜单项自动添加active类，导致打开页面时没有任何高亮项。

3. 潜在依赖缺失 #

如果页面未引入jQuery库，这段JS代码根本无法执行，自然不会有任何效果。

解决方案 #

方案一：后端渲染时直接添加高亮类（推荐） #

利用ASP.NET MVC的路由上下文，在生成菜单时直接为当前页面对应的项加上active类，无需依赖JS：

<ul class="app-menu">
        <li><a class="app-menu__item @(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")" href="@Url.Action("Index","Home")">Accueil</a></li>
        <li><a class="app-menu__item" href="#">Categories</a></li>
        <li><a class="app-menu__item @(ViewContext.RouteData.Values["Controller"].ToString() == "Stock" ? "active" : "")" href="@Url.Action("Index","Stock")">Stock</a></li>
        <li><a class="app-menu__item @(ViewContext.RouteData.Values["Controller"].ToString() == "Article" ? "active" : "")" href="@Url.Action("Index","Article")">Article</a></li>
</ul>

这种方式从根源解决了页面跳转丢失状态的问题，加载完成直接显示正确高亮。

方案二：JS处理页面加载后的高亮状态 #

如果坚持用JS实现，需要在页面加载完成后，根据当前URL匹配菜单项并添加active类，同时仅处理锚点链接的点击事件：

<script>
    $(document).ready(function() {
        // 页面加载时设置初始高亮
        var currentPath = window.location.pathname;
        $(".app-menu li a").each(function() {
            var linkHref = $(this).attr("href");
            // 根据实际URL结构调整匹配逻辑
            if(currentPath.includes(linkHref)) {
                $(this).addClass("active");
            }
        });

        // 仅处理锚点链接的点击高亮
        $(".app-menu li a[href='#']").click(function (e) {
            e.preventDefault(); // 可选：阻止锚点默认跳转行为
            $(".app-menu li a.active").removeClass("active");
            $(this).addClass("active");
        });
    });
</script>

额外检查项 #

• 确认页面已正确引入jQuery库；
• 确保active类的CSS样式已正确定义，示例：

.app-menu__item.active {
    color: #2563eb;
    background-color: #eff6ff;
    border-left: 3px solid #2563eb;
    /* 根据需求调整样式 */
}

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