我在 #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
答案 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');