[英]Trigger nested tab pane on Bootstrap 3
I'm developing a site using latest bootstrap release, and I need some help to figure out how to solve this: 我正在使用最新的引导程序发行版开发站点,并且需要一些帮助以找出解决方法:
I've nested two tab panes, to be able to manage a lot of information in little space (It´sa very long law and I need to show its articles clearly) 我嵌套了两个选项卡窗格,以便能够在很小的空间内管理很多信息(这是一个很长的法律,我需要清楚地显示其文章)
The first tabs divides the main sections, the nested shows in little pieces the articles. 第一个选项卡将主要部分划分开,嵌套的小块显示文章。
It works fine in the main container. 它在主容器中工作正常。
But I´ll need a navigation tree in the sidebar, and I can´t trigger the nested pane tab if the parent one isn´t already enabled. 但是,在边栏中需要一个导航树,并且如果尚未启用父窗格,则无法触发嵌套窗格选项卡。
I think it could be posible to add some jquery to trigger the parent tab when clicking a direct link to a nested one, but I don´t get it... :( 我认为在单击指向嵌套链接的直接链接时添加一些jquery来触发父选项卡可能是可行的,但我不明白... :(
This is the code (my apoligies, I see it too long): 这是代码(我的策略,我看得太久了):
<!-- 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>
<!-- ... -->
I have tested it yet! 我已经测试过了! Just add some jQuery code to make it trigger
只需添加一些jQuery代码以使其触发
First, 第一,
Add id for some elements: 为某些元素添加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>
and 和
<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>
After, add this javascript code: 之后,添加以下javascript代码:
$('#id_test_11').on('click',function(e){
$('#id_test_1').click()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.