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

Я использую 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>

Где проблема внутри кода?

Ответы

Ответ 1

Вам нужно добавить класс in в активный контент вкладки

Причина заключается в предопределенном стиле в bootstrap css .fade.in {opacity: 1;}, поэтому, если вы используете .fade в закладке, вам также нужно добавить .in

См. эту демонстрацию

HTML

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

Ответ 2

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

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

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

Что он делает, это в основном удалить ваш предварительно определенный активный класс и снова включить его, высмеивая событие 'click'.

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

Ответ 3

Также стоит упомянуть,

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

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

Это не будет:

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

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