javascript - 嵌套 Bootstrap 选项卡 - jQuery

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

只需将 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>

这是一个基于您的 fiddle :http://jsfiddle.net/36hk5bne/1/