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（“click”，function（）{ $（“。child li a”）。first（）。trigger（“click”）; }）;

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

1 个答案: