Bootstrap 标签页（Tab）插件

タブ（Tab）はBootstrap 导航元素第1章で紹介しました。いくつかのdata 属性を組み合わせることで、タブインターフェースを簡単に作成できます。このプラグインを使用すると、コンテンツをタブ、ピル型タブ、さらにはドロップダウンメニューのタブに配置できます。

このプラグインの機能を単独で読み込む場合は、次を読み込む必要があります。tab.js。または、ちょうどBootstrap 插件概览一章で述べたように、参照できますbootstrap.jsまたは圧縮版のbootstrap.min.js。

用法

タブを有効にするには、次の2つの方法があります。

• 通过 data 属性：あなたは追加する必要がありますdata-toggle="tab" 或 data-toggle="pill"アンカーテキストリンクの中に。

  添加navとnav-tabs类到ul中で、Bootstrapが適用されます标签样式，添加navとnav-pills类到ul中で、Bootstrapが適用されます胶囊式样式。

  <ul class="nav nav-tabs">
      <li><a href="../index.html" data-toggle="tab">Home</a></li>
      ...
  </ul>
  

• 通过 JavaScript：JavaScript を使用してタブを有効にできます。次に示すとおりです：

  $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
  

  以下の例は、さまざまな方法で各タブをアクティブにする方法を示しています：

  // 通过名称选取标签页
  $('#myTab a[href="../index.html"]').tab('show')
  
  // 选取第一个标签页
  $('#myTab a:first').tab('show')
  
  // 选取最后一个标签页
  $('#myTab a:last').tab('show')
  
  // 选取第三个标签页（从 0 开始索引）
  $('#myTab li:eq(2) a').tab('show')
  

フェードイン・フェードアウト効果

タブにフェードイン・フェードアウト効果を設定したい場合は、次を追加してください。.fade到每个.tab-pane後で。最初のタブは.inクラスを追加して、初期コンテンツをフェードイン表示します。次の例のとおりです：

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

实例

以下の例は、data属性を使用するタブ（Tab）プラグインとそのフェードイン・フェードアウト効果を示しています：

結果は以下のとおりです：

方法

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="../index.html" data-toggle="tab">Home</a></li>
    .....
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    .....
</div>
<script>
    $(function () {
        $('#myTab a:last').tab('show')
    })
</script>

实例

以下の例は、タブ（Tab）プラグインのメソッド.tabの使い方を示しています。この例では、2番目のタブiOSアクティブな状態：

結果は以下のとおりです：

事件

次の表は、タブ（Tab）プラグインで使用されるイベントを示しています。これらのイベントは、関数内でフックとして使用できます。

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

实例

以下の例は、タブ（Tab）プラグインのイベントの使い方を示しています。この例では、現在と以前にアクセスしたタブが表示されます：

結果は以下のとおりです：