在 Twitter Bootstrap 嵌套选项卡中重置活动子项

Question

该项目需要 3 个父选项卡 (P)，每个包含一组 3 个子选项卡 (c)。

问题：当用户在 P1c3 退出时，导航到另一个父集，然后返回 P1，c3 仍然处于活动状态。有谁知道打开 P1 时如何将默认活动子级重置为 c1？

基本结构，没什么特别的。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li><a href="#P1" data-toggle="tab">P1</a></li>
    <li><a href="#P2" data-toggle="tab">P2</a></li>
    <li><a href="#P3" data-toggle="tab">P3</a></li>
  </ul>

<div class="tab-content tab-container">

  <div class="tab-pane" id="P1">
      <div class="tabbable tabs-left"> 
          <ul class="nav nav-tabs">
              <li class="active"><a href="#c1" data-toggle="tab">c1</a></li>
              <li><a href="#c2" data-toggle="tab">c2</a></li>
              <li><a href="#c3" data-toggle="tab">c3</a></li>
          </ul>
          <div class="tab-content tab-info">
              <div class="tab-pane active" id="c1">
                P1 child 1                                       
              </div>
              <div class="tab-pane" id="c2">
                P1 child 2
              </div>
              <div class="tab-pane" id="c3">
                P1 child 3
              </div>
          </div>
      </div>
  </div>

etc...

Answer 1

当您单击父项时，在第一个子选项卡上调用 $.trigger 以将其重置回第一个选项卡。非常粗略，但希望您能有所了解。

<ul class="nav parent nav-tabs">
   <li><a href="#P1" data-toggle="tab">P1</a></li>
   <li><a href="#P2" data-toggle="tab">P2</a></li>
   <li><a href="#P3" data-toggle="tab">P3</a></li>
</ul>

<ul class="nav child nav-tabs">
   <li class="active"><a href="#c1" data-toggle="tab">c1</a></li>
   <li><a href="#c2" data-toggle="tab">c2</a></li>
   <li><a href="#c3" data-toggle="tab">c3</a></li>
</ul>

$(".parent li a").on("点击", function () { $(".child li a").first().trigger("click"); });