我试图在每个导航栏菜单项下保持白色下划线,但是当我单击导航栏中的每个菜单项时,我会进行整页刷新,因为我是将用户定向到新的控制器/操作/视图。如何保持css的状态,以便即使在使用新视图重定向到新控制器后,仍然具有单击菜单项下划线的菜单项?注意-该视图会重新渲染导航栏菜单,该菜单包含在部分视图中
$(document).ready(function() {
$(".nav-pills a").click(function() {
$(".nav-pills a").removeClass("active");
$(this).addClass("active");
//$(this).css("color", "black");
});
});
.menupartial {
background-color: #16749F;
/*opacity: .9;*/
/*width: 100%;*/
margin-bottom: 20px;
}
.menupartial a {
color: lightgrey;
font-weight: bold;
}
.nav-pills > li > a {
border-radius: 0;
}
.nav-pills > li > a:hover {
border-radius: 0;
background-color: #16749F;
color: white;
}
.nav-pills > li > a:active,
.nav-pills > li > a.active {
border-bottom: 5px solid white;
}
/*div.container.body-content {
background-color: yellow;
}*/
<div class="row menupartial">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="nav nav-pills">
<li>@Html.ActionLink("User", "UserProfile", "Account")</li>
<li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
<li>@Html.ActionLink("YogaSpaces", "Index", "YogaSpace")</li>
<li><a href="#">Your Schedules</a>
</li>
<li><a href="#">Your Messages</a>
</li>
<li><a href="#">Your Groups</a>
</li>
<li><a href="#">Your Friends</a>
</li>
</ul>
</div>
</div>
最佳答案
<ul class="nav nav-pills">
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "User" ? "active" : "")">@Html.ActionLink("User", "UserProfile", "Account")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Profiles" ? "active" : "")">@Html.ActionLink("Profiles", "Index", "Profile")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "YogaSpaces" ? "active" : "")">@Html.ActionLink("YogaSpaces", "Index", "YogaSpace")</li>
</ul>
在这里使用引导程序类。