BootstrapラベルページTabプラグインの使用方法

タブページ
BootstrapラベルページTabプラグインにはbootstrap-tab.jsファイルのサポートが必要です.このプラグインを使用する前に、jQueryとbootstrap-tab.jsファイルをインポートする必要があります.
コールモード
1、data属性呼び出し
Dataプロパティ呼び出しを使用して、JavaScriptコードを記述する必要はありません.基本的なHTML構造を定義するだけです.
まず、ナビゲーション構造を定義します.すべてのナビゲーションリンクのdata-toggle属性値は「tab」でなければなりません.href属性値は対応するコンテンツパネルのidで、ラベルをクリックすると対応するコンテンツパネルが見つかります.

class="nav nav-tabs">

 

class="active">href="#tab1" data-toggle="tab">Section 1

 

href="#tab2" data-toggle="tab">Section 2

 

href="#tab3" data-toggle="tab">Section 3

次に、コンテンツパネルを定義します.コンテンツパネルのidは、ラベルページのhref属性値に対応し、すべてのコンテンツパネルを.tab-contentのコンテナに配置します.

class="tab-content">

 

class="tab-pane active " id="tab1">

    I'm in Section 1.

 

 

class="tab-pane" id="tab2">

    Howdy, I'm in Section 2.

 

 

class="tab-pane" id="tab3">

    What up girl, this is Section 3.

 

Bootstrapはカプセル のラベルナビゲーションもサポートしており、「nav-tabs」を「nav-pills」に き え、data-toggleの「tabs」を「pill」に き えるだけでよい. えば:

class="nav nav-pills">

 

class="active">href="#tab1" data-toggle="pills">Section 1

 

href="#tab2" data-toggle="tab">Section 2

 

href="#tab3" data-toggle="tab">Section 3

2、JavaScript び し
JavaScriptで び す は、 リンクのクリックイベントでtab('show')メソッドを び して、 ラベルを にアクティブにし、 するラベルの ボックスを する があります. $('#myTab a').click(function (e) {   e.preventDefault();   $(this).tab('show'); }) ここで、e.preventDefault();ハイパーリンクのデフォルトの を し、$(this).tab('show'); のタブ・ページに するコンテンツ・ボックスが されます.
また、ラベル・ページをアクティブにする もいくつかあります.$('#myTab a[href="#profile"]').tab('show');   // href="#profile" $('#myTab a:first').tab('show');             // $('#myTab a:last').tab('show');             // $('#myTab li:eq(2) a').tab('show');          // ( 0 ) の をかしげる について、15 のソフトウェア の 、Web が きで、HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrapなどに して、「HTML 」、「 を くCSS」、「Less 」、「JSON 」、「Bootstrap 2ユーザーガイド」、「Bootstrap 3 」を しています.すべてGitHubにオープンソースします.