引导程序中的嵌套选项卡 [英] Nested tabs in bootstrap
问题描述
我在Bootstrap中嵌套了标签,这是代码: http://jsfiddle.net/RLdYC/
I have nested tabs in Bootstrap, and here is the code: http://jsfiddle.net/RLdYC/
$("ul.nav-tabs a").click(function (e) {
e.preventDefault();
$(this).tab('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tabbable boxed parentTabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#set1">Tab 1</a>
</li>
<li><a href="#set2">Tab 2</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="set1">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub11">Tab 1.1</a>
</li>
<li><a href="#sub12">Tab 1.2</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="sub11">
<p>Tab 1.1</p>
</div>
<div class="tab-pane fade" id="sub12">
<p>Tab 1.2</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="set2">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub21">Tab 2.1</a>
</li>
<li><a href="#sub22">Tab 2.2</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="sub21">
<p>Tab 2.1</p>
</div>
<div class="tab-pane fade" id="sub22">
<p>Tab 2.2</p>
</div>
</div>
</div>
</div>
</div>
</div>
问题是,只要您点击顶行上的其他标签,就会隐藏下面嵌套标签的实际内容。我需要显示第一个子选项卡的内容。
The problem is, as soon as you click on a different tab on the top row, the actual content of the nested tab below will become hidden. I need the content of the first subtab to be shown.
我试图在第一个子选项卡上触发click()函数,但这没有帮助。
I tried to trigger the click() function on the first subtab, but it didn't help. Can you please write the code that I need to fix this?
推荐答案
您可以使用多个ID为<$ c $的元素吗? c> myTabContent 。
You have more than one element with id myTabContent
.
HTML ID在整个页面上应该是唯一的。
HTML ids should be unique across the page.
只需删除这些ID或使用类即可(在此处工作演示)。
Simply remove those ids or use classes instead (working demo here).
$("ul.nav-tabs a").click(function (e) {
e.preventDefault();
$(this).tab('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tabbable boxed parentTabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#set1">Tab 1</a>
</li>
<li><a href="#set2">Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="set1">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub11">Tab 1.1</a>
</li>
<li><a href="#sub12">Tab 1.2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="sub11">
<p>Tab 1.1</p>
</div>
<div class="tab-pane fade" id="sub12">
<p>Tab 1.2</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="set2">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub21">Tab 2.1</a>
</li>
<li><a href="#sub22">Tab 2.2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="sub21">
<p>Tab 2.1</p>
</div>
<div class="tab-pane fade" id="sub22">
<p>Tab 2.2</p>
</div>
</div>
</div>
</div>
</div>
</div>
这篇关于引导程序中的嵌套选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!