当用户单击导航选项卡时如何设置活动类答案

【问题标题】：how to set active class when user clicks on a nav-tabs当用户单击导航选项卡时如何设置活动类
【发布时间】：2015-03-17 00:39:16
【问题描述】：

我的 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"，因为当前用户单击的选项卡不会突出显示为活动？有人可以推荐吗？

【问题讨论】：

标签： jquery css asp.net twitter-bootstrap tabs

【解决方案1】：

我没有使用 ASP.net 的经验，但是，我知道它是一个服务器端框架，对吗？您正在尝试做的事情需要客户端 javascript，这里是 Codepen sn-p：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');
    });
});

最好的问候。

【讨论】：