[英]Trigger nested tab pane on Bootstrap 3
我正在使用最新的引導程序發行版開發站點,並且需要一些幫助以找出解決方法:
我嵌套了兩個選項卡窗格,以便能夠在很小的空間內管理很多信息(這是一個很長的法律,我需要清楚地顯示其文章)
第一個選項卡將主要部分划分開,嵌套的小塊顯示文章。
它在主容器中工作正常。
但是,在邊欄中需要一個導航樹,並且如果尚未啟用父窗格,則無法觸發嵌套窗格選項卡。
我認為在單擊指向嵌套鏈接的直接鏈接時添加一些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()
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.