2015-02-10 4 views
0

У меня есть несколько вкладок уровня, как это:Вложенные вкладки бутстраповские - 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> 

А вот 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/

+0

Если я правильно понимаю вас, вы хотите сохранить содержимое вкладки после переключения между вкладками содержания не должен быть удален? –

+0

Да, это именно то, что я хочу. – user3350731

ответ

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> 

Вот скрипка, основанный на ваших: http://jsfiddle.net/36hk5bne/1/

+0

Я бы предпочел, чтобы каждый контент блока оставался внутри div, потому что я хотел бы отображать их вертикально, например: http://jsfiddle.net/36hk5bne/2/show/ – user3350731

+0

А, интересно. У меня было что-то подобное в одном из моих проектов. Я обновил вашу скрипку. В этом случае я добавил класс «средний» в средний col-md-3, чтобы я мог ссылаться на него и его навигационные вкладки в JS, и сказать ему удалить «активный» класс со всех вкладок, чтобы что они снова становятся интерактивными, когда вы меняете вкладки в «#interest_tabs». Я также немного очистил код JavaScript. Вот скрипка: http://jsfiddle.net/36hk5bne/4/. –

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

+0

Я бы предпочел, чтобы каждый контент блока оставался внутри div, потому что я хотел бы отображать их вертикально, например: jsfiddle.net/36hk5bne/2/show – user3350731

Смежные вопросы