jquery - 用户单击导航选项卡时如何设置事件类

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 的经验，但是，我知道它是一个服务器端框架，对吗？您要执行的操作需要客户端 javascript，这是 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');
    });
});

最好的问候。