强制引导选项卡处于活动状态答案

【问题标题】：Forcing bootstrap tab to be active强制引导选项卡处于活动状态
【发布时间】：2014-01-27 16:14:13
【问题描述】：

我在#tab1下面有几个标签和子标签。

<ul id="main-nav-tabs" class="nav nav-tabs" style="margin-top: 5px;">
    <li id="tab1"><a href="#tab1-tab" data-toggle="tab"></a></li>
    <li class="active" id="tab2"><a href="#tab2-tab" data-toggle="tab"></a></li>
    <li id="tab3"><a href="#tab3-tab" data-toggle="tab"></a></li>

</ul>


<div id="tab-content" class="tab-content">
    <div id="tab1-tab" class="tab-pane fade scrollable">
        <ul class="nav nav-pills"> 
            <li class="active"><a href="#first-subtab" data-toggle="tab"></a></li>
            <li><a href="#second-subtab" data-toggle="tab"></a></li>
            <li><a href="#third-subtab" data-toggle="tab"></a></li>
        </ul>
    <div id="subtab-container">
        <div id="subtab-tab-content" class="tab-content">
            <div id="first-subtab" class="tab-pane in active fade"></div>
            <div id="second-subtab" class="tab-pane fade"></div>
            <div id="third-subtab" class="tab-pane fade"></div>
        </div>
    </div>
</div>  

<div id="tab2" class="tab-pane in active fade">
    <table id="table2" class="table table-condensed"></table>
</div>          
<div id="tab3" class="tab-pane fade">
    <table id="table3" class="table table-condensed"></table>
</div>

现在，我有几组数据，当您选择一组时，它会加载所有选项卡的数据。当您选择另一组时，它会使用新数据更新所有选项卡。

加载时，我将#Tab2 作为主要的默认活动选项卡。当我单击#tab1 时，我希望#first-subtab 成为默认的活动选项卡，但它总是返回到从最后一组数据中单击的最后一个子选项卡。

比如我加载数据，默认为#tab2，我点击#tab1->第三个子标签。当我加载另一个默认为#tab2 的集合时，我点击#tab1-> 而不是转到#first-subtab，它转到#third-subtab 因为我上次点击它。

我尝试将#first-subtab 设置为默认值：

$('#tab1').click(function(){
    $('#third-tab').removeClass('li.active');
    $('#first-tab').addClass('li.active');             
});

我也尝试相应地显示/隐藏，但没有什么会强制 #first-subtab 成为默认值...有什么建议吗？

我的完整 html 是 197 行。当我使用谷歌开发者工具时，我点击了我想要激活的#first-subtab，它位于以下位置：

html -> body -> div.layout.layout-vertical -> div#views.visible
-> div#table-container.fill -> div#tab-content.tab-content
-> div# tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a

【问题讨论】：

标签： javascript jquery html twitter-bootstrap tabs

【解决方案1】：

激活第一个子标签

试试：

 $('#tab1').click(function(){
            $('.nav-pills li').removeClass('active');
            $('.nav-pills li:first').addClass('active');             
        });

并使用古力的建议来修复你的标签。

看看古力的小提琴，把我们的两个答案合并起来。

【讨论】：

是的，你是对的，我刚刚对你的答案投了赞成票。但我认为他也希望让 tab1 下的子标签始终默认为第一个子标签为活动状态。
@Trevor，当我使用它时，我得到 Uncaught Error: Syntax error, unrecognized expression:first。我不确定冒号表示法是什么意思。
我刚看到你上面的评论，你是对的，这就是我要找的。span>
@user2847749 检查这个例子：bootply.com/108839 它应该适用于大多数版本的 jQuery。不知道你为什么会收到这个错误。 w3schools.com/jquery/sel_first.asp
@Trevor，我找到了解决方案并添加了它，我明天可以让它成为解决方案。感谢您的所有帮助！

【解决方案2】：

您的 a 标签具有 #tab2-tab 的 href 值：

    <li class="active" id="tab3"><a href="#tab3-tab" data-toggle="tab"></a></li>

而你的 div 有一个错误的 ID 值（与锚点不一样）：

        <div id="tab3" class="tab-pane fade">

这样修复div的ID

        <div id="tab3-tab" class="tab-pane fade">

它会完美运行。

#tab2 也是如此。

如果添加@Trevor 的答案，它将非常适合您的需求。

JSFiddle Demo including Trevor point!

【讨论】：

感谢您的回答，但如果您转到您的 jfiddle 并单击选项卡 A -> A3 -> B -> A，则 A3 将自动成为默认值。在您的示例中，我需要将 A1 设为默认值。我想要一个 jquery 示例。我不认为这是我的 html，我不得不为这个问题制定通用名称，但我认为 html 在我的代码中很好......

【解决方案3】：

感谢 Trevor 的回答，我能够找到适用于我的代码的解决方案：

首先，我必须在子标签的 ul 中添加一个 id：

<ul id="subtabsID" class="nav nav-pills">

然后我用它使第一个子选项卡成为默认子选项卡。

 $("#subtabsID > .active").removeClass('active');
 $("#subtabsID > :nth-child(1)").addClass('active');       
 $('#first-subtab').addClass('active in');

【讨论】：