ブートストラップのタブ（タブ）ウィジェット
タブ内（タブ） ブートストラップナビゲーション要素章で紹介。 データ属性の数を組み合わせることで、簡単にタブインターフェイスを作成することができます。 このプラグインを使用すると、タブやカプセルのタブでコンテンツを入れ、さらにメニュー]タブをドロップダウンすることができます。
あなたは、個々のプラグイン機能を参照したい場合は、tab.js.を参照する必要が または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。
使用法
次の2つの方法で、タブを有効にすることができます。
- データ属性を使用して：あなたはテキストリンクを固定するために、データトグル= "タブ"またはデータトグル= "ピル"を追加する必要があります。
ナビ NAV-タブとULにクラスを追加し、ブートストラップ適用されるラベルスタイルを 、そしてクラスをULにNAVのnav-丸薬を追加し 、ブートストラップ適用されるカプセルスタイルを 。
<ULクラス= "NAV NAV-タブ"> <李> <a href="#identifier" data-toggle="tab">ホーム</a>にます。</ li> ... </ UL>
- JavaScriptをすることで次のようにあなたは、Javscriptを有効にするには、タブを使用することができます。
$（ '＃のMyタブA'）。{（関数（e）をクリックしてください e.preventDefault（） $（この）の.tab（ 'ショー'） }）次の例では、さまざまなタブをアクティブにするさまざまな方法を示しています。
// $（ '＃は、[のhref = "＃プロファイルを"] Myタブ'）で、タブの名前を選択します。タブ（ 'ショー'） //最初のタブ$（ '＃Myタブ：最初の'）タブを選択します（ 'ショー'）。 //最後のタブ$（ '＃Myタブ：最後の'）を選択します。タブ（ 'ショー'） // 3番目のタブ（ゼロインデックス付き）を選択 $（ '＃のMyタブ李：EQ（2）A'）タブ（ 'ショー'）。
フェード効果
あなたが効果をフェードタブを設定する必要がある場合は、それぞれの.tab-ペインの後ろ.fade追加します。 次の例に示すように、第1のタブは、元のコンテンツをフェードインするために、クラス.IN追加する必要があります。
<DIVクラス= "タブ・コンテンツ」> <DIV idは= "ホーム"クラス= "アクティブのタブペインのフェード"> ... </ DIV> <DIVクラス= "タブ・ペインフェード" ID = "SVN"> ... </ DIV> <DIVクラス= "タブ・ペインフェード" ID = "IOS"> ... </ DIV> <DIVクラス= "タブ・ペインフェード"のid = "java"の> ... </ DIV> </ DIV>
例
次の例では、プロパティのデータタブ（タブ）やプラグインフェード効果の使用を示しています。
例
<UL ID = "Myタブ」 クラス= "NAVのNAV-タブ" >
<李 クラス = "アクティブ">
<A href = "#home" データトグル= "タブ"> W3Cschoolホーム</ A>
</李>
<李> <A href = "#ios" データトグル= "タブ"> iOSの</ A> </ LI>
<李 クラス = "]プルダウン">
<A href = "＃" ID = "myTabDrop1" クラス = "ドロップダウン、トグル」
データトグル=> "]プルダウン" Javaの<B クラス= "カレット"> </ B>
</ A>
<UL クラス = "ドロップダウンメニュー」 役割 = "メニュー" アリア-labelledbyの = "myTabDrop1">
<李> <A href = "#jmeter" タブインデックス = "-1" データトグル= "タブ"> JMeterの</ A> </ LI>
<李> <A href = "#ejb" タブインデックス = "-1" データトグル= "タブ">のejb </ A> </ LI>
</ UL>
</李>
</ UL>
<DIV ID = "myTabContent" クラス = "タブ・コンテンツ」>
<DIV クラス= "のタブペインフェードアクティブ」 ID = "ホーム">
<P> W3Cschoool このチュートリアルでは、このサイトでは、ウェブ技術の愛好家のクイックスタート過半数を支援し、自分のウェブサイトを構築し、無料の駅の技術文書を提供し、最新のWebサイトの技術を提供することにあります。 早期のラインへの初飛行は-だけでなく、技術だけでなく、夢を学習します。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "イオス">
<P>のiOSが 開発 され 、Appleのモバイルオペレーティングシステムで公開されています。 もともと2007年に初めてiPhone、iPod TouchとApple TVのためにリリースしました。 iOSのは、彼らはダーウィンの基盤を共有し、OS Xに由来します。 OS XオペレーティングシステムをMacで使用されている、iOSのは、Appleのモバイル版です。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "JMeterの">
<P> JMeterは 、オープンソース・テスト・ソフトウェアです。 これは、負荷およびパフォーマンステストのための100％純粋なJavaアプリケーションです。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "EJB">
<P>エンタープライズJavaBean（EJBは ） J2EEの（例えばJBOSS、ウェブロジックなど）互換のアプリケーションサーバにデプロイされ、高度にスケーラブルで堅牢なエンタープライズ・アプリケーションを作成するための開発フレームワークです。 </ P>
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
ウェイ
方法:.。$（）タブは、タブ要素と容器の内容物を活性化することができます。 タブは 、データターゲットまたはコンテナのhref DOMノードのポイントを使用する必要があります。
<ULクラス= "NAV NAV-タブ" ID = "Myタブ">
<李クラス= "アクティブ"> <a href="#identifier" data-toggle="tab">ホーム</a>にます。</ li>
.....
</ UL>
<DIVクラス= "タブ・コンテンツ」>
<DIVクラス= "タブ・ペインアクティブ」のid ="ホーム "> ... </ DIV>
.....
</ DIV>
<スクリプト>
$（関数（）{
$（ '＃Myタブ：最後の'）。タブ（ 'ショー'）
}）
</スクリプト>
例
次の例では、タブ（タブ）プラグインの方法.TAB使用方法を示します。 本実施例では、2番目のタブがアクティブにiOSのです。
例
<UL ID = "Myタブ」 クラス= "NAVのNAV-タブ" >
<李 クラス = "アクティブ"> <A href = "#home" データトグル= "タブ"> W3Cschoolホーム</ A>
</李>
<李> <A href = "#ios" データトグル= "タブ"> iOSの</ A> </ LI>
<李 クラス = "]プルダウン">
<A href = "＃" ID = "myTabDrop1" クラス = "ドロップダウン、トグル」
データトグル=> "]プルダウン" Javaの<B クラス= "カレット"> </ B>
</ A>
<UL クラス = "ドロップダウンメニュー」 役割 = "メニュー" アリア-labelledbyの = "myTabDrop1">
<李> <A href = "#jmeter" タブインデックス = "-1" データトグル= "タブ"> JMeterの</ A>
</李>
<李> <A href = "#ejb" タブインデックス = "-1" データトグル= "タブ">のejb </ A>
</李>
</ UL>
</李>
</ UL>
<DIV ID = "myTabContent" クラス = "タブ・コンテンツ」>
<DIV クラス= "のタブペインフェードアクティブ」 ID = "ホーム">
<P> W3Cschoool このチュートリアルでは、このサイトでは、ウェブ技術の愛好家のクイックスタート過半数を支援し、自分のウェブサイトを構築し、無料の駅の技術文書を提供し、最新のWebサイトの技術を提供することにあります。 早期のラインへの初飛行は-だけでなく、技術だけでなく、夢を学習します。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "イオス">
<P>のiOSが 開発 され 、Appleのモバイルオペレーティングシステムで公開されています。 もともと2007年に初めてiPhone、iPod TouchとApple TVのためにリリースしました。 iOSのは、彼らはダーウィンの基盤を共有し、OS Xに由来します。 OS XオペレーティングシステムをMacで使用されている、iOSのは、Appleのモバイル版です。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "JMeterの">
<P> JMeterは 、オープンソース・テスト・ソフトウェアです。 これは、負荷およびパフォーマンステストのための100％純粋なJavaアプリケーションです。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "EJB">
<P>エンタープライズJavaBean（EJBは ） J2EEの（例えばJBOSS、ウェブロジックなど）互換のアプリケーションサーバにデプロイされ、高度にスケーラブルで堅牢なエンタープライズ・アプリケーションを作成するための開発フレームワークです。 </ P>
</ DIV>
</ DIV>
<スクリプト> $（関数（） {$（ '＃Myタブ李：EQ（1）A'）タブ（ 'ショー'）;.}）; </スクリプト>
»をお試しください
結果は以下の通りであります：
イベント
次の表は、タブ（タブ）プラグインのイベントで使用されるように一覧表示されます。 これらのイベントは時フック関数を使用することができます。
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tab | 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。 |
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})
|
| shown.bs.tab | 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。 |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})
|
例
次の例では、タブ（タブ）の使用プラグインイベントを示しています。 本実施例では、現在および以前訪問したタブが表示されます。
例
<HR>
<P クラス= "アクティブなタブ"> <strong>のタブをアクティブに する</ strong>：<スパン> </ span>を</ P>
<P クラス= "前のタブ"> <strong>の前のタブをアクティブに する</ strong>：<スパン> </ span>を</ P>
<HR>
<UL ID = "Myタブ」 クラス= "NAVのNAV-タブ" >
<李 クラス = "アクティブ"> <A href = "#home" データトグル= "タブ"> W3Cschoolホーム</ A> </ LI>
<李> <A href = "#ios" データトグル= "タブ"> iOSの</ A> </ LI>
<李 クラス = "]プルダウン">
<A href = "＃" ID = "myTabDrop1" クラス = "ドロップダウン、トグル」
データトグル=> "]プルダウン" Javaの<B クラス= "カレット"> </ B> </ A>
<UL クラス = "ドロップダウンメニュー」 役割 = "メニュー" アリア-labelledbyの = "myTabDrop1">
<李> <A href = "#jmeter" タブインデックス = "-1" データトグル= "タブ"> JMeterの</ A> </ LI>
<李> <A href = "#ejb" タブインデックス = "-1" データトグル= "タブ">のejb </ A> </ LI>
</ UL>
</李>
</ UL>
<DIV ID = "myTabContent" クラス = "タブ・コンテンツ」>
<DIV クラス= "のタブペインフェードアクティブ」 ID = "ホーム">
<P> W3Cschoool このチュートリアルでは、このサイトでは、ウェブ技術の愛好家のクイックスタート過半数を支援し、自分のウェブサイトを構築し、無料の駅の技術文書を提供し、最新のWebサイトの技術を提供することにあります。 早期のラインへの初飛行は-だけでなく、技術だけでなく、夢を学習します。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "イオス">
<P>のiOSが 開発 され 、Appleのモバイルオペレーティングシステムで公開されています。 もともと2007年に初めてiPhone、iPod TouchとApple TVのためにリリースしました。 iOSのは、彼らはダーウィンの基盤を共有し、OS Xに由来します。 OS XオペレーティングシステムをMacで使用されている、iOSのは、Appleのモバイル版です。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "JMeterの">
<P> JMeterは 、オープンソース・テスト・ソフトウェアです。 これは、負荷およびパフォーマンステストのための100％純粋なJavaアプリケーションです。 </ P>
</ DIV>
<DIV クラス = "タブ・ペインフェード」 ID = "EJB">
<P>エンタープライズJavaBean（EJBは ） J2EEの（例えばJBOSS、ウェブロジックなど）互換のアプリケーションサーバにデプロイされ、高度にスケーラブルで堅牢なエンタープライズ・アプリケーションを作成するための開発フレームワークです。 </ P>
</ DIV>
</ DIV>
<スクリプト> $（関数（） {$（ '[データトグル= "タブ"]'）。（ 'shown.bs.tab'、関数の（e）{//で活性化しますタブ名VAR activeTab = $（e.target）は.text （）; //前活性化入手名のvarタブpreviousTab = $（e.relatedTarget）は.text（ ）; $（ "アクティブタブスパン。」）。 HTML（activeTab）; $（ "前のタブスパン。」）HTML（previousTab）;.}）;}）; </ script>の
»をお試しください
結果は以下の通りであります：
