Щебетать закладки Bootstrap, не скрывающие контент

Question

У меня есть небольшая проблема с моим кодом. Загрузка вкладок, но когда я нажимаю на другую неактивную вкладку, не скрывает содержимое первой вкладки и отображает содержимое обеих вкладок. Я могу что-нибудь сделать? Большое спасибо!

<ul style="list-style:none"class="available-tabs nav nav-tabs" id="tabs" data-tabs="tabs"> 
      <li class="active"> <a data-toggle="tab" href="#featured-tab-body">FEATURED PROJECTS</a></li> 
      <li> <a data-toggle="tab" href="#available-latest-tab">LATEST PROJECTS </a> </li> 
</ul> 
<div class="available-content tab-content container"> 
    <div id="available-featured-tab"> 
    <div class="featured-list-wrapper"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="featured-list-content"> 
      <div class="row featured-tab-head" style="color:black;height:40px"> 
       <div class="col-md-5 col-sm-5 col-xs-8"> 
       <h5> YAE</h5> 
       </div> 
       <div class="col-md-2 col-sm-2 hidden-xs"> 
       <h5>NAH</h5> 
       </div> 
       <div class="col-md-2 hidden-sm hidden-xs"> 
       <h5>HEY</h5> 
       </div> 
       <div class="col-md-1 col-sm-2 hidden-xs"> 
       <h5>YOU</h5> 
       </div> 
      </div> 
      <div class="featured-tab-body tab-pane fade in active"> 
       sup 
      </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div id="available-latest-tab" class="tab-pane fade"> 
    hi 
    </div> 
</div> 

Answer 1

Необходимо разместить все содержимое div под одним и тем же корневым div. Так istead из:

<div class="available-content tab-content container"> 
    <div id="available-featured-tab"> 
     <div class="featured-list-wrapper"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="featured-list-content"> 
         <div class="featured-tab-body tab-pane fade in active"> 
          sup 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="available-latest-tab" class="tab-pane fade"> 
     hi 
    </div> 
</div> 

Понадобится:

<div class="available-content tab-content container"> 
    <div id="available-featured-tab"> 
     <div class="featured-list-wrapper"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="featured-list-content"> 
         <div class="featured-tab-body tab-pane fade in active"> 
          sup 
         </div> 
         <div id="available-latest-tab" class="tab-pane fade"> 
          hi 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Нет необходимости в Jquery, так как самозагрузки сделать работу для вас. Исправленная скрипку: http://jsfiddle.net/xFW8t/1777/