如何在用户单击导航选项卡时设置活动 class

Question

我的 asp.net mvc web 应用程序中有以下标记，它显示两个选项卡，我使用的是 bootstrap 2.0.2:-

 <ul class="nav nav-tabs" id="myTab">

     @if(Model.hasRacks)
    {
   <li> @Ajax.ActionLink("Show Related Racks", "CustomerRack","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",
  OnSuccess="detailsuccess"

}
)
   </li>  }
      @if(Model.hasServer)
    {
    <li >@Ajax.ActionLink("Show Related Servers", "CustomerServer","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",

 OnSuccess="detailsuccess",



}
)</li>}</ul>

我想要实现的是设置 class="active" 当用户单击选项卡时，当前用户单击的选项卡不会突出显示为活动的？任何人都可以建议吗？

Answer 1

我没有使用 ASP.net 的经验，但是，我知道它是一个服务器端框架，对吗？您要执行的操作需要客户端 java 脚本，这是 Codepen 代码段：http://codepen.io/anon/pen/JoeMjV

它们的关键部分是 java 脚本摘录：

// Using jQuery javascript library
$(document).ready(function() {
    $('ul.nav li').click(function() {
        // Remove previous clicked tab class
        $('ul.nav li').removeClass('nav-active');
        // Add class to the tab that triggered the click event
        $(this).addClass('nav-active');
    });
});

此致。

如何在用户单击导航选项卡时设置活动 class

how to set active class when user clicks on a nav-tabs

css

asp.net

jquery

tabs

twitter-bootstrap