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

时间:2014-01-27 16:14:13

标签: javascript jquery html twitter-bootstrap tabs

我在 #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 - &gt;第三个子选项卡。当我加载另一个集时,默认为#tab2,我点击#tab1 - &gt; 进入#first-subtab,进入{{1} } 因为我最后点击了它。

我已尝试将#third-subtab设置为默认值,其中包含以下内容:

#first-subtab

我也试图相应地显示/隐藏,但没有任何内容会强制$('#tab1').click(function(){ $('#third-tab').removeClass('li.active'); $('#first-tab').addClass('li.active'); }); 默认显示...有什么建议吗?

我的完整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

3 个答案:

答案 0 :(得分:4)

要激活第一个子标记

尝试:

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

并使用Guli的建议来修复标签。

看看古力的小提琴是否合并了我们的两个答案。

答案 1 :(得分:1)

您的标签的href值为#tab2-tab:

    <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

答案 2 :(得分:1)

感谢Trevor的回答,我找到了适用于我的代码的解决方案:

首先,我必须在我的ul子标题中添加一个id:

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

然后我用它来使first-subtab成为默认子选项卡。

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