web-dev-qa-db-ja.com

Twitter Bootstrapフレームワークでタブをフェードインおよびフェードアウトするにはどうすればよいですか？

jQuery UIには、次のように、タブをフェードイン/フェードアウトに設定してタブを初期化するオプションがあります。

$(".selector").tabs({ fx: { opacity: 'toggle' } });

Twitter Bootstrapフレームワークタブでも同様のことが可能ですか？

jquerytabstwitter-bootstrap
13
Travis Northcutt

いいえ、ただし独自に追加することもできます jsFiddle

$('.tabs').tabs()
    .bind('change', function (e) {
        $(this).next().hide().fadeIn();
    });
3
Sinetheta

Bootstrap 2と3の両方で、.tab-pane要素にbootstrap-transition.jsがロードされたfadeクラスを指定するだけです。1行書く必要はありません。独自のJavaScriptコードのすべて。

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

公式Twitter Bootstrapドキュメント からのコードサンプル。

65
baxang