Question

我有多个级别标签，如下所示：

<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>

这是jQuery部分：

jQuery(document).ready(function($) {
    $('#interest_tabs').on('click', 'a[data-toggle="tab"]', function(e) {
        e.preventDefault();
        var $link = $(this);
        if (!$link.parent().hasClass('active')) {
          //remove active class from other tab-panes
          $('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active');
          // click first submenu tab for active section
          $('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click();
          // activate tab-pane for active section
          $('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active');
        }
    });
});

此处的问题是，例如，当我访问All标签，然后其子Popular显示其内容时，但当我转到其他标签Brands然后返回第一个标签All，我无法再访问其内容。

这是jsfiddle：http://jsfiddle.net/36hk5bne/

Answer 1

您需要使用嵌套标记。选项卡内容应位于父选项卡窗格内。然后可以在默认选项卡和窗格上设置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>

http://bootply.com/OHJJnjo0bc

Answer 2

只需将div.tab-content放在各自的ul标签下即可。这样，它可以工作，无需任何其他JavaScript代码。

主级别标签显示第一个tab-content，这是您的第二级标签，包括tab-content。

以下是您需要的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>

这是一个小提琴，基于你的：http://jsfiddle.net/36hk5bne/1/

嵌套的引导选项卡 - jQuery

2 个答案: