1

我正在使用最新的引导程序版本开发一个站点，我需要一些帮助来弄清楚如何解决这个问题：

我嵌套了两个选项卡窗格，以便能够在很小的空间内管理大量信息（这是一条很长的法律，我需要清楚地展示它的文章）

第一个选项卡划分主要部分，嵌套显示文章的小片段。

它在主容器中工作正常。

但是我需要侧边栏中的导航树，如果尚未启用父窗格选项卡，我将无法触发嵌套窗格选项卡。

我认为在单击指向嵌套选项卡的直接链接时添加一些 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>
      <!-- ... -->
4

1 回答 1

2

我已经测试过了！只需添加一些 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()
});
于 2013-08-24T03:13:17.447 回答