MVC Bootstrap Navbar - 活动类只保留一个 <li> 元素

Posted 2023-05-08

【中文标题】MVC Bootstrap Navbar - 活动类只保留一个 <li> 元素

【英文标题】：MVC Bootstrap Navbar - active class stays to just one <li> element

【发布时间】：2017-04-10 18:31:46

【问题描述】：

我的 asp.net mvc 应用程序中有一个引导导航栏，我要做的就是将活动类更改为导航栏菜单中当前选定的元素。

我设法通过使用以下 jquery 部分实现了这一点：

$(document).ready(function () 
            $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
                .closest('li').addClass('active');
            $(this).siblings().removeClass('active');
        );

在实现这个之后，我的两个导航栏链接都是荧光笔。一开始，只有一个默认的active 类，然后我点击到其他链接的那个它也变成了荧光笔，但默认的active 仍然保持活动状态，所以我最终得到了两个活动链接。

谁能帮我把这个工作正常

引导程序：

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @html.ActionLink("blah blah", "Index", "Home", new  area = "" , new  @class = "navbar-brand" )
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("blah", "Create", "Todoes")</li>
                        <li class="active">@Html.ActionLink("ALL", "Index", "Todoes")</li>
                        <li>@Html.ActionLink("blah2", "", "Todoes")</li>
                        <li>@Html.ActionLink("blah3", "", "Todoes")</li>




                    </ul>
                </div>
            </div>

【参考方案1】：

为什么不直接从 .cshtml 文件中的 razor 控制这个？

我是这样做的：

public string CheckActive(string actionName, string controllerName)

   return ((ViewContext.RouteData.Values["action"].ToString().ToLower() == actionName.ToLower() && ViewContext.RouteData.Values["controller"].ToString().ToLower() == controllerName.ToLower()) ? "active" : string.empty);

如果给定的actionName 和controllerName 与当前的Action 和Controller 匹配，此方法只会返回活动状态。

这样你会像这样使用它：

<li class="@CheckActive("actionInActionLink", "controllerInActionLink")">@Html.ActionLink("Link text", "actionInActionLink", "controllerInActionLink")</li>

【讨论】：

感谢您的回答。我尝试了代码，但它给了我一些错误并且无法弄清楚。而且我仍然更喜欢用 jQuery 来做，对我来说似乎更简单，虽然我不能让它工作：D

对不起，它不适合你。如果有帮助，您必须将其放在 .cshtml 文件顶部的 @ ... 中。

【参考方案2】：

请试试这个：

$(document).ready(function () 
        $('li').each(function()
               $(this).removeClass('active');
        );
        $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]').closest('li').addClass('active');
);