twitter bootstrap 3 tab view fade не работает должным образом

Question

Я использую twitter bootstrap 3, применяя .fade, чтобы показать вкладки с постепенным исчезновением. Это хорошо для содержания первой вкладки, за исключением не отображается в первый раз:

http://jsfiddle.net/tVSv9/

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
</ul> 

    <div id='content' class="tab-content"> 
     <div class="tab-pane fade active" id="home"> 
     <ul> 
      <li>home</li> 
      <li>home</li> 
      <li>home</li> 
      <li>home</li> 
      <li>home</li> 
      <li>home</li> 
      <li>home</li> 
     </ul> 
     </div> 
     <div class="tab-pane fade" id="profile"> 
     <ul> 
      <li>profile</li> 
      <li>profile</li> 
      <li>profile</li> 
      <li>profile</li> 
      <li>profile</li> 
      <li>profile</li> 
      <li>profile</li> 
     </ul> 
     </div> 
     <div class="tab-pane fade" id="messages"> 
      this is my message 
     </div> 
     <div class="tab-pane fade" id="settings"></div> 
    </div>  

Где проблема в коде?

Answer 1

Вам нужно добавить in класс вашего активного содержимого вкладки

Причина в том, существует предопределенный стиль в начальной загрузки CSS .fade.in {opacity: 1;} так что если вы используете .fade на вкладке, то вам нужно добавить .in слишком

Смотрите эту demo

HTML

<div class="tab-pane fade in active" id="home"> 

Answer 2

Это немного странно, но я мог бы подумать о быстром взломе, чтобы добиться этого.

$('.nav li.active').removeClass('active').find('a').trigger('click'); 

Поместите выше сценарий внутри $(document).ready(function() { ... })

Что она делает в основном удалить предустановленный активный класс, и повторно включить его насмешливый «нажмите» событие.

Fiddle: http://jsfiddle.net/jofrysutanto/tVSv9/2/

Answer 3

Также стоит отметить,

Это будет работать:

$('#yourtabs a:first').tab('show'); 
$('.tab-pane:first').addClass('fade in'); 

Это не будет:

$('.tab-pane:first').addClass('fade in'); 
$('#yourtabs a:first').tab('show'); 

В противном случае ваш .fade будут скрыты по инициализации.