我试图在每个导航栏菜单项下保持白色下划线,但是当我单击导航栏中的每个菜单项时,我会进行整页刷新,因为我是将用户定向到新的控制器/操作/视图。如何保持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>


在这里使用引导程序类。

09-20 10:56