我在 Bootstrap 中嵌套了选项卡,代码如下: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>
问题是,一旦您单击顶行的不同选项卡,下面嵌套选项卡的实际内容就会被隐藏。我需要显示第一个子选项卡的内容。
我尝试在第一个子选项卡上触发 click() 函数,但没有帮助。你能写出我需要解决这个问题的代码吗?
最佳答案
您有多个 ID 为 myTabContent
的元素。
HTML ID 在整个页面中应该是唯一的。
只需删除这些 ID 或使用类即可 ( 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>
关于javascript - Bootstrap 中的嵌套选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19459912/