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

Posted 2021-04-21

我在#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 - > third-sub选项卡。当我加载另一个集合时，它默认为#tab2，我点击#tab1-> INSTEAD OF GOING TO #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

答案

要激活第一个子标记

尝试：

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

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

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

另一答案

您的标签具有＃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！

另一答案

感谢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');