嵌套的引导程序选项卡-jQuery

Question

I have multiple level tabs like this:

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

And here is the jQuery part:

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');
        }
    });
});

The issue here is when for example I access the All tab and then its child Popular it displays its content, but when I go to the other tab Brands and then return to the first tab All , I can't access its content anymore.

Here is the jsfiddle: http://jsfiddle.net/36hk5bne/

Answer 1

You need to use nested markup. The tab content should be inside the parent tab's pane. Then active can be set on the default tabs and panes.

<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

Just put the div.tab-content under their respective ul tabs. This way, it works, without any additional JavaScript code.

The main level tabs show the first tab-content , which is where your second level tabs are, including their tab-content .

Here is the HTML that you need. No additional JS needed:

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

Here is a fiddle, based on yours: http://jsfiddle.net/36hk5bne/1/