Twitter Bootstrap Tabs verstecken Inhalt nicht

Question

Ich habe ein kleines Problem mit meinem Code. Die Registerkarten werden geladen, aber wenn ich auf eine andere inaktive Registerkarte klicke, wird der Inhalt der ersten Registerkarte nicht ausgeblendet und der Inhalt beider Registerkarten angezeigt. Kann ich irgendetwas tun? Vielen Dank!

<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

Sie müssen alle Div-Inhalte unter dem gleichen Root-Div setzen. So istead von:

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

Sie benötigen:

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

Keine Notwendigkeit für die JQuery, da Bootstrap die Arbeit für Sie tun. Korrigierte Geige: http://jsfiddle.net/xFW8t/1777/