Javascript 嵌套引导选项卡-jQuery

我有多个级别选项卡，如下所示：

<ul class="nav nav-tabs" id="interest_tabs">
    <!--top level tabs-->
    <li><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
    <!--all tab menu-->
    <div id="all" class="tab-pane">
        <ul class="nav nav-tabs" id="all_tabs">
            <li><a href="#all_popular" data-toggle="tab">Popular</a></li>
        </ul>
    </div>

    <!--brands tab menu-->
    <div id="brands" class="tab-pane">
        <ul class="nav nav-tabs" id="brands_tabs">
            <li><a href="#brands_popular" data-toggle="tab">Popular</a></li>
            <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
        </ul>
    </div>

 </div>
 <div>

    <!--all tab content-->
    <div class="tab-content">
        <div id="all_popular" class="tab-pane">
            <i>all_popular interests go here</i>
        </div>
        <div id="all_unique" class="tab-pane">
            <i>all_unique interests go here</i>
        </div>
    </div>

    <!--brands tab content-->
    <div class="tab-content">
        <div id="brands_popular" class="tab-pane">
            <i>brands_popular interests go here</i>
        </div>
        <div id="brands_unique" class="tab-pane">
            <i>brands_unique interests go here</i>
        </div>
    </div>
</div>

这里的问题是，例如，当我访问

All

选项卡，然后其子项

Popular

显示其内容时，但当我转到其他选项卡

Brands

然后返回第一个选项卡

All

时，我无法再访问其内容

---

下面是JSFIDLE:

您需要使用嵌套标记。选项卡内容应位于父选项卡的窗格内。然后可以在默认选项卡和窗格上设置

active

<div class="tabbable">
  <ul class="nav nav-tabs" id="interest_tabs">
      <!--top level tabs-->
    <li class="active"><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
  </ul>


  <!--top level tab content-->
  <div class="tab-content">
      <!--all tab menu-->
      <div id="all" class="tab-pane active">
          <ul class="nav nav-tabs" id="all_tabs">
              <li class="active"><a href="#all_popular" data-toggle="tab">Popular</a></li>
          </ul>
          <!--all tab content-->
          <div class="tab-content">
              <div id="all_popular" class="tab-pane active">
                  <i>all_popular interests go here</i>
              </div>
              <div id="all_unique" class="tab-pane">
                  <i>all_unique interests go here</i>
              </div>
          </div>
      </div><!--all tab pane-->

      <!--brands tab menu-->
      <div id="brands" class="tab-pane">
          <ul class="nav nav-tabs" id="brands_tabs">
              <li class="active"><a href="#brands_popular" data-toggle="tab">Popular</a></li>
              <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
          </ul>

          <!--brands tab content-->
          <div class="tab-content">
              <div id="brands_popular" class="tab-pane active">
                  <i>brands_popular interests go here</i>
              </div>
              <div id="brands_unique" class="tab-pane">
                  <i>brands_unique interests go here</i>
              </div>
          </div>

      </div><!--brands tab pane-->

  </div> <!--top level tab content-->
</div>

所有的大众兴趣都在这里
所有独特的兴趣都在这里




品牌和大众兴趣都在这里
品牌和独特的兴趣在这里

---

只需将

div.tab-content

放在各自的

ul

选项卡下即可。这样，它就可以工作，无需任何额外的JavaScript代码

主级别选项卡显示第一级

选项卡内容

，这是第二级选项卡所在的位置，包括它们的

选项卡内容

这是您需要的HTML。不需要额外的JS：

<ul class="nav nav-tabs" id="interest_tabs">
    <!--top level tabs-->
    <li><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
    <!--all tab menu-->
    <div id="all" class="tab-pane">
        <ul class="nav nav-tabs" id="all_tabs">
            <li><a href="#all_popular" data-toggle="tab">Popular</a></li>
        </ul>
        <div class="tab-content">
            <div id="all_popular" class="tab-pane">
                <i>all_popular interests go here</i>
            </div>
            <div id="all_unique" class="tab-pane">
                <i>all_unique interests go here</i>
            </div>
        </div>
    </div>

    <!--brands tab menu-->
    <div id="brands" class="tab-pane">
        <ul class="nav nav-tabs" id="brands_tabs">
            <li><a href="#brands_popular" data-toggle="tab">Popular</a></li>
            <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
        </ul>
        <div class="tab-content">
            <div id="brands_popular" class="tab-pane">
                <i>brands_popular interests go here</i>
            </div>
            <div id="brands_unique" class="tab-pane">
                <i>brands_unique interests go here</i>
            </div>
        </div>
    </div>
</div>

所有的大众兴趣都在这里
所有独特的兴趣都在这里




品牌和大众兴趣都在这里
品牌和独特的兴趣在这里

---

这是一把小提琴，基于你的：

如果我理解正确，你想在选项卡之间切换后保留选项卡的内容，内容不应该被删除吗？是的，这正是我想要的。我更希望每个块内容都保留在一个div中，因为我想这样垂直显示：啊，有趣。我的一个项目中也有类似的东西。我已经更新了你的小提琴。在本例中，我在中间col-md-3中添加了一个类“middle”，这样我就可以在JS中引用它和它的导航选项卡，并告诉它从所有选项卡中删除“active”类，这样当您更改“#interest_tabs”中的选项卡时，它们就可以再次单击。我还稍微整理了一下JavaScript代码。这里是小提琴：。我更希望每个块内容都留在一个div中，因为我希望以垂直方式显示它们：jsfiddle.net/36hk5bne/2/show

<ul class="nav nav-tabs" id="interest_tabs">
    <!--top level tabs-->
    <li><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
    <!--all tab menu-->
    <div id="all" class="tab-pane">
        <ul class="nav nav-tabs" id="all_tabs">
            <li><a href="#all_popular" data-toggle="tab">Popular</a></li>
        </ul>
        <div class="tab-content">
            <div id="all_popular" class="tab-pane">
                <i>all_popular interests go here</i>
            </div>
            <div id="all_unique" class="tab-pane">
                <i>all_unique interests go here</i>
            </div>
        </div>
    </div>

    <!--brands tab menu-->
    <div id="brands" class="tab-pane">
        <ul class="nav nav-tabs" id="brands_tabs">
            <li><a href="#brands_popular" data-toggle="tab">Popular</a></li>
            <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
        </ul>
        <div class="tab-content">
            <div id="brands_popular" class="tab-pane">
                <i>brands_popular interests go here</i>
            </div>
            <div id="brands_unique" class="tab-pane">
                <i>brands_unique interests go here</i>
            </div>
        </div>
    </div>
</div>