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');
    });
});

最好的问候。

如何在用户单击nav-tabs时设置活动类

1 个答案: