コンテンツTwitterのブートストラップタブが常に私はコンテンツのセクションを持ってしようとしてる、Twitterのブートストラップのフレームワークを使用して

Question

を表示は条件付きでタブ機能を使用して表示されます。http://getbootstrap.com/javascript/#tabs

私がいる問題は、divの中にそのコンテンツです選択されたタブに関係なく、常に「タブペインアクティブ」として分類されます。コンテンツの

<ul class="nav nav-tabs" role="tablist" style="margin-top:30px; margin-left:250px;"> 
<li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Product Information</a></li> 
<li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Shipping Information</a></li> 
<li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Usage Instructions</a></li> 
<li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Testimonials</a></li> 
<li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">FAQ</a></li> 
</ul> 

コード、タブのため

コードを（他のタブを選択した場合、その内容は、このdiv要素にコンテンツの下に表示されます）

<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane-active" id="t1"> 
    <h3>Product Information</h3> 
    <p>Product information here   
    </div> 

    <div role="tabpanel" class="tab-pane" id="t2"> 
    <h3>Shipping Information</h3> 
    <p>Shipping info here</p> 
    </div> 

    <div role="tabpanel" class="tab-pane" id="t3"> 
    <h3>Using Instructions</h3> 
    <p>Usage info here</p> 
    </div> 

    <div role="tabpanel" class="tab-pane" id="t4"> 
    <h3>Testimonials</h3> 
    <p>Testimonials here</p> 
    </div> 

    <div role="tabpanel" class="tab-pane" id="t5">  
    <h3>FAQ</h3> 
    <p>FAQ here</p> 
    </div> 
</div> 

私が変更した場合"tab-pane-active"クラスを "tab-pane"に設定すると、タブは意図どおりに機能しますが、最初のdivの内容はデフォルトでは表示されません。

私はこの機能をウェブサイト上の別の場所でも構文の違いなしに使用しているため、ここでは機能しない理由を特定できません。

Answer 1

これはクラスがあるのでtab-pane activeあなたのdivは、私はクラスのダッシュを逃したが、それは正しく動作するようになりましたかなり恥ずかしい感じ、tab-pane-active

<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="t1"> 
    <h3>Product Information</h3> 
    <p>Product information here   
    </div> 

    <div role="tabpanel" class="tab-pane" id="t2"> 
    <h3>Shipping Information</h3> 
    <p>Shipping info here</p> 
    </div> 

    <div role="tabpanel" class="tab-pane" id="t3"> 
    <h3>Using Instructions</h3> 
    <p>Usage info here</p> 
    </div> 

    <div role="tabpanel" class="tab-pane" id="t4"> 
    <h3>Testimonials</h3> 
    <p>Testimonials here</p> 
    </div> 

    <div role="tabpanel" class="tab-pane" id="t5">  
    <h3>FAQ</h3> 
    <p>FAQ here</p> 
    </div> 
</div>