我正在使用最新的 Bootstrap 版本开发一个网站,我需要一些帮助来弄清楚如何解决这个问题:
我嵌套了两个tab panes,可以在很小的空间里管理很多信息(这是一个很长的法律,我需要清楚地展示它的文章)
第一个选项卡划分主要部分,嵌套的部分显示文章。
它在主容器中运行良好。
但我需要侧边栏中的导航树,如果父项尚未启用,我将无法触发嵌套 Pane 选项卡。
我认为可以添加一些 jquery 来在单击指向嵌套选项卡的直接链接时触发父选项卡,但我不明白...:(
这是代码(抱歉,我看到它太长了):
<!-- Sidebar -->
<div class="bs-sidebar" role="complementary">
<ul id="test">
<li><a href="#test_1" data-toggle="tab">Title I</a>
<ul>
<li><a href="#test_11" data-toggle="tab">Sub_Title I</a></li>
<li><a href="#test_12" data-toggle="tab">Sub_Title II</a></li>
</ul>
</li>
<li><a href="#test_2" data-toggle="tab">Title II</a></li>
<!-- ... -->
</ul>
</div>
<!-- main container -->
<div role="main">
<h2>Some Title</h2>
<div class="bs-example bs-example-tabs">
<div class="panel panel-default">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="tabs" class="nav nav-tabs">
<li><a href="#test_1" data-toggle="tab">Title I</a></li>
<li><a href="#test_2" data-toggle="tab">Title II</a></li>
<!-- ... -->
</ul>
</div>
<div class="panel-body parent">
<div id="tabs_parent" class="tab-content">
<div id="test_0" class="tab-pane active fade in">
<p>Instructions</p>
</div>
<div id="test_1" class="tab-pane fade">
<ul>
<li><a href="#test_11" data-toggle="tab">Sub_Title I</a></li>
<li><a href="#test_12" data-toggle="tab">Sub_Title II</a></li>
</ul>
<div id="tabs_children" class="tab-content">
<div id="test_11" class="tab-pane fade">
<p>Sub-I Lorem ipsum dolor sit amet...</p>
</div>
<div id="test_12" class="tab-pane fade">
<p>SubII - Morbi lectus nibh...</p>
</div>
</div>
</div>
<div id="test_2" class="tab-pane fade">
<p>Morbi lectus nibh...</p>
</div>
<!-- ... -->
最佳答案
我已经测试过了!只需添加一些 jQuery 代码使其触发
首先,
为一些元素添加id:
<li><a href="#test_11" id="id_test_11" data-toggle="tab">Sub_Title I</a></li>
<li><a href="#test_12" id="id_test_12" data-toggle="tab">Sub_Title II</a></li>
和
<li><a href="#test_1" id="id_test_1" data-toggle="tab">Title I</a></li>
<li><a href="#test_2" id="id_test_2" data-toggle="tab">Title II</a></li>
之后,添加这段 javascript 代码:
$('#id_test_11').on('click',function(e){
$('#id_test_1').click()
});
关于javascript - 在 Bootstrap 3 上触发嵌套的选项卡 Pane ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18412561/