Javascript 设置导航栏菜单';s类处于活动状态,直到单击其他菜单,或者直到用户停留在某个控制器中?
在我的项目菜单栏中,当单击某个菜单时,我将其类设置为活动。这是通过以下代码完成的Javascript 设置导航栏菜单';s类处于活动状态,直到单击其他菜单,或者直到用户停留在某个控制器中?,javascript,jquery,css,asp.net-mvc,menuitem,Javascript,Jquery,Css,Asp.net Mvc,Menuitem,在我的项目菜单栏中,当单击某个菜单时,我将其类设置为活动。这是通过以下代码完成的 public static class MenuExtensions { public static MvcHtmlString MenuItem( this HtmlHelper htmlHelper, string text, string action, string controller ) { var li = new TagBuil
public static class MenuExtensions
{
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string text,
string action,
string controller
)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}
li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
return MvcHtmlString.Create(li.ToString());
}
}
这就是我创建菜单栏的方式
<ul class="nav-pills">
//<li> tags class is set to active when clicked
<li>@Html.MenuItem("Account","Details","Account")</li>
<li>@Html.MenuItem("Contacts","Index","AddressBook")</li>
<li>@Html.MenuItem("SomeMenu","Index","Appointment")</li>
<li>@Html.MenuItem("Hello "+User.Identity.Name+"!","Manage","Account")</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
//单击时,- 标记类设置为活动
- @Html.MenuItem(“账户”、“详细信息”、“账户”)
- @MenuItem(“联系人”、“索引”、“地址簿”)
- @MenuItem(“某些菜单”、“索引”、“约会”)
- @MenuItem(“Hello”+User.Identity.Name+“!”、“Manage”、“Account”)
下面是单击帐户
菜单时菜单栏的外观示例
现在,当我单击编辑按钮时,橙色栏“帐户”菜单消失(活动类从菜单项中删除)。这并不方便,因为用户仍在帐户部分
在单击另一个菜单之前,是否可以将菜单的类设置为活动状态?
或
直到页面属于某个控制器
例如,将菜单项“类”设置为活动状态,直到用户保留帐户控制器(在本例中)删除此部分
string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase)
从
成功了
如果您有两个菜单项指向同一个控制器,那么它将不起作用,在这种情况下,两个菜单项都将用类active包装Create sample output,html和js仅在jsfiddle.net中,我如何才能做到这一点?我的类是由我发布的第一部分代码设置的,这部分代码更多的是C#和Html帮助程序,只需复制并粘贴页面的输出源代码即可
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}