我的 asp.net mvc 应用程序中有一个 Bootstrap 导航栏,我想做的就是将事件类更改为导航栏菜单中当前选定的元素。
我设法通过使用以下 jquery 部分实现了这一点:
$(document).ready(function () {
$('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
.closest('li').addClass('active');
$(this).siblings().removeClass('active');
});
在实现这个之后,我的两个导航栏链接都是荧光笔。一开始,只有默认的 active
类,然后我点击其他链接的那个也变成了荧光笔,但默认的 active
仍然保持事件状态,所以我最终得到两个事件链接。
谁能帮我让它正常工作
Bootstrap :
<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>
最佳答案
为什么不直接从 .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 匹配,此方法将返回 active。
这样你就可以像这样使用它:
<li class="@CheckActive("actionInActionLink", "controllerInActionLink")">@Html.ActionLink("Link text", "actionInActionLink", "controllerInActionLink")</li>
关于javascript - MVC Bootstrap Navbar - 事件类只保留一个 <li> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40820529/