Twitterコンテンツを隠していないブートストラップタブ

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/