jquery - 整页刷新后如何保存CSS信息

标签 jquery html css asp.net-mvc twitter-bootstrap

我试图在每个导航栏菜单项被选中时在其下方保留一个白色下划线,但是当我单击导航栏中的每个菜单项时,我会进行整页刷新,因为我将用户 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/

相关文章:

javascript - $.ajax().done() 中的 window.open 和弹出窗口拦截器

jquery - 背景不申请位置固定div的父元素

php - 表单方法不从 html 表单返回数据,其中数据来自 mysql 中的单个列

javascript - 在工具提示中显示表格单元格内容(jsfiddle 在实际站点上不起作用)

html - 为什么子元素不适合父元素(导致滚动条)?

jquery - 选择通过 jquery 选择的选项仅适用于 chrome

javascript - 从javascript中的url用户输入中提取id

php - 来自 PHP Chunked Response 的 HTML5 视频标签,可能吗?

html - 具有内联 block 子项的 div 与相同的 CSS 显示不一致

jquery - 如何在IE浏览器中运行 Owl Carousel slider 的淡入淡出效果