如何激活单击的选项卡和不活动的默认值？答案

【问题标题】：How to active clicked tab and inactive default?如何激活单击的选项卡和不活动的默认值？
【发布时间】：2014-05-16 13:32:47
【问题描述】：

我对下面的代码有问题，其中没有可点击的选项卡。我想让一个选项卡在单击时处于活动状态而其他处于非活动状态。

    <html>
    <head>
       <script type="text/javascript">
        $('#myTab a').click(function (e) {
         e.preventDefault()
        $(this).tab('show')
        })
       </script>
    </head>
    <body>
     ...
     <ul class="nav navbar-nav" id="myTab">
       <li class="active"><a href="Home.aspx" data-toggle="tab">HOME</a></li>
       <li><a href="AboutUs.aspx" data-toggle="tab">ABOUT US</a></li>
       <li><a href="ContactUs.aspx" data-toggle="tab">CONTACT US</a></li>
       <li><a href="Searchjob.aspx" data-toggle="tab">SEARCH JOBS</a></li>
     </ul>     
     ...
    </body>
    </html>

【问题讨论】：

看看我的回答。希望它能帮助您解决问题。

标签： jquery asp.net twitter-bootstrap

【解决方案1】：

试试这个，

<script type="text/javascript">
$('#myTab a').click(function (e) {
     e.preventDefault();
    $(this).tab('show');

     //removing active class from other selected/default tab
    $("#myTab .active").removeClass("active");

    //adding active class to current clicked tab
    $(this).parent().addClass("active");
});
</script>

这里是jsFiddle Demo

【讨论】：

它在演示中工作。您的网站在线吗？如果是，请给我一个检查问题的链接。或者只是检查控制台是否有任何错误。
它不在线。但是当我删除数据切换时，选项卡是可点击的，但不是活动的。为什么？
因为选项卡只是链接......所以它们当然可以点击，Bootstrap JS使用数据切换来激活选项卡内容......所以它是必需的。
@BenjaminPaul 我的意思是每当我添加数据切换线时，无法单击选项卡。
您需要提供一个示例.. 使用 JS fiddle.. 此答案中的演示运行良好，因此只需检查差异？

【解决方案2】：

使用下面提到的脚本：

$('#myTab li').click(function() {
    $('#myTab li').each(function() {
        $(this).removeClass('active');
    });

    $(this).addClass('active');

})

【讨论】：

和以前一样。我认为问题是 data-toggle="tab" 行。每当我添加它时，标签变得不可点击。
可以提供 JSFiddle 吗？
@SpiderCode, each() 不需要像你演示的那样从所有 li 中删除类 active，从 jQuery 中你可以简单地删除单个语句中的所有类，就像我显示的 $("#myTab .active").removeClass("active"); 跨度>