Twitter Bootstrap Tab Content Всегда Показаны

Question

Использование механизма Twitter Bootstrap, я пытаюсь иметь раздел контента появляются условно с помощью функции вкладок: http://getbootstrap.com/javascript/#tabs

Проблема у меня в том, что содержание в DIV классифицируется как «tab-pane-active», всегда отображается независимо от выбранной вкладки. (Когда выбраны другие вкладки, их содержание приводится ниже содержание в этом 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 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>