MVC Bootstrap Navbar-活動類僅停留在一個 <li> 元件

Question

我在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>

Answer 1

為什么不直接從.cshtml文件中的剃刀控制它呢？

我這樣做：

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相匹配，則此方法僅返回active。

這樣，您將像這樣使用它：

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

Answer 2

請嘗試以下方法：

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