jquery - 在 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"); });