我试图在每个导航栏菜单项被选中时在其下方保留一个白色下划线,但是当我单击导航栏中的每个菜单项时,我会进行整页刷新,因为我将用户 Bootstrap 至一个新的 Controller /行动/观点。如何保留 css,以便即使在我重定向到具有新 View 的新 Controller 后,我仍然有被单击的带下划线的菜单项?注意 - View 重新呈现导航栏菜单,该菜单包含在部分 View 中
$(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>
在这里使用 Bootstrap 类。
关于jquery - 整页刷新后如何保存CSS信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32638453/