タブ（タブ）いくつかのデータプロパティを組み合わせることで、タブインターフェイスを簡単に作成できます。
「プラグインの機能を個別に参照する場合は、tab.jsを参照する必要がある場合、またはBootstrapプラグインの概要の章で述べたように、bootstrap.jsまたはBootstrap.min.jsの圧縮バージョンを参照できます。」
1。使用法
2つの方法でタブページを有効にすることができます。
データプロパティによる：data-toggle = "tab"またはdata-toggle = "pill"をアンカーテキストリンクに追加する必要があります。
NAVおよびNAV-TABSクラスをULに追加すると、ブートストラップタグスタイルが適用され、NAVおよびNAVピルクラスをULに追加すると、ブートストラップカプセルスタイルが適用されます。
<ul> <li> <a href = "＃識別子" data-toggle = "tab"> home </a> </li> ... </ul>
JavaScriptを介して：JavaScriptを使用して、次のようにタブを有効にすることができます。
$（ '＃mytab a'）。クリック（function（e）{e.preventdefault（）$（this）.tab（ 'show'）}））次の例は、さまざまな方法で個々のタブのアクティブ化を示しています。
//タブページ$（ '＃mytab a [href = "＃profile"]'） a '）。タブ（' show '）
2。フェード効果
タブにフェードエフェクトを設定する必要がある場合は、各.tab-paneに.fadeを追加します。次の例に示すように、最初のタブを.inクラスでフェードインしてフェードインするために追加する必要があります。
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3。メソッド
。$（）。タブ：このメソッドは、タブ要素とコンテンツコンテナをアクティブにします。タブページは、DOMのコンテナノードを指すデータターゲットまたはHREFを使用する必要があります。
<ul id = "mytab"> <li> <a href = "＃識別子" data-toggle = "tab"> home </a> ..... </li> </ul> <div> <div id = "home"> ... </div> .... </div> <script> $（function（）{$（ '＃mytab a：last'）。IV。イベント
次の表には、タブ（タブ）プラグインで使用するイベントを示します。これらのイベントは、機能のフックとして使用できます。
5。基本的な例
1。タグ
タブページは、一般的にタブ関数と呼ばれます。
//基本的な使用<ul> <li> <a href = "＃html5" data-toggle = "tab"> html5 </a> </li> <li> <a href = "＃bootstrap" data-toggle = "tab" </li> <li> <a href = "＃extjs" data-toggle = "tab"> extjs </a> </li> </ul> <div style = "パディング：10px;"> <div id = "html5"> ... </div> <div id = "bootstrap"> ... </div> </div>
//フェードエフェクトを設定でき、優先コンテンツがデフォルトで表示されていることを示します<div id = "html5"> // capsule <ul> // data-targetに置き換えることもできます
結合または結合効果はデータターゲットと同じです
// javascriptを使用し、タブメソッドを直接使用します。 $（ '＃nav a'）
//イベント、その他の類似性$（ '＃nav a'）。 $（ '＃nav a'）
この一連のチュートリアルは、Bootstrap Basic Tutorials Special Topics、Click to Learnのようにコンパイルされています。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラップテーブルの使用チュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。