如何在用户未访问Index/About页面时保持Sessions菜单项激活？

现有导航菜单代码 #

<ul class="rd-navbar-nav">
<li>
     <a href="@Url.Action("Index", "Home")">Home</a>
</li>
<li>
     <a href="@Url.Action("About", "Home")">About Me</a>
</li>
<li>
     <a href="@Url.Action("Sessions", "Home")">Schedule A Healing Session</a>
</li>
</ul>

现有JavaScript代码 #

$(document).ready(function () {
        var url = window.location.href;
        var FileName = url.substr(url.lastIndexOf("/") + 1);
        $('nav li').find('.active').removeClass('active');
        $('nav li a').filter(function () {
            return this.href == url;
        }).parent().addClass('active');

        if (FileName != "Index" && FileName != "About")
        {
            //Here I want to keep "Sessions" active if the user did not select Index or About 
        }
    });

解决方案 #

直接在注释区域补充逻辑，精准定位Sessions对应的导航项并添加激活类即可。同时优化原有代码逻辑，避免重复操作导致的冲突，修改后的完整代码如下：

$(document).ready(function () {
        var url = window.location.href;
        var FileName = url.substr(url.lastIndexOf("/") + 1);
        // 先清空所有导航项的激活状态
        $('nav li').removeClass('active');

        if (FileName === "Index" || FileName === "About") {
            // 仅在Index或About页面，给对应导航项加激活类
            $('nav li a').filter(function () {
                return this.href == url;
            }).parent().addClass('active');
        } else {
            // 其他页面统一给Sessions导航项加激活类
            // 用href包含Sessions的选择器更稳定，不受文本修改影响
            $('nav li a[href*="Sessions"]').parent().addClass('active');
        }
    });

逻辑说明 #

1. 第一步统一移除所有导航<li>的active类，确保不会出现多个激活项的情况；
2. 通过文件名判断当前页面：
   • 若为Index或About页面，正常匹配对应导航项添加激活类；
   • 若为其他页面，直接给Sessions对应的导航项添加激活类；
3. 推荐使用[href*="Sessions"]选择器，相比文本内容匹配，它不会因为导航文本修改而失效，更具鲁棒性。

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