ブートストラップ学習 JS プラグイン タブ page_html/css_WEB-ITnose

シンプルなタブページ

コード:

[javascript] view plaincopy

& lt;h1 class="ページヘッダー">4.3タブ

• ホーム
/li>
[javascript]
• プレーンコピーを表示
;
タグページにすべてのタグを追加します 属性 data-toggle="tab"

次に、下に div コンテナを追加し、タブのスタイル クラスを与えます。 -コンテンツ。

コンテナ内で div を定義し、上記の href のタグ ID に対応する id 属性を div に追加し、タブペイン スタイル クラスを追加します。そのうちの 1 つは次のとおりで、もちろんアクティブ スタイルです。この目的のためにクラスも追加されます デフォルトでアクティブになります

<div class="tab-pane active" id="home">

最後に、各タブ ページをクリックすることができ、タブ コンテンツ ページに対応するドロップダウン メニューのメニューもクリックできますtab-content で定義しました。

上記の操作では、data 属性を通じてラベルの切り替えとコンテンツの表示を実現できることがわかります。

拡張タブ ナビゲーション
1. このプラグインは、タブ ナビゲーション コンポーネントにタブ コンテンツ領域を追加します。
使用法
JavaScript を介して切り替え可能なタブを開始します (各タブは個別にアクティブ化されます):

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

すべての a タグの data-toggle を削除してから js を呼び出します
個別に実行するにはいくつかの方法がありますタブ:
れーれー

9. 只需为页面元素简单的添加data-toggle="tab" 或 data-toggle="pill"就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。为ul添加.nav和.nav-tabs classe即可为其赋予Bootstrap标签页样式；而添加nav和nav-pills class可以为其赋予胶囊标签页。

   可以通过jQuery来执行首次的加载

   <script>  $(function () {    $('#myTab a:first').tab('show')  })</script>

   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  e.target //通过此参数可以获得激活的tab信息   e.relatedTarget // 激活之前的那一个tab的信息})

   [javascript] view plain copy

   渐入效果

   为每个.tab-pane添加.fade可以让标签页具有淡入的特效。第一个标签页所对应的的内容区必须也添加.in使初始内容同时具有淡入效果。

   <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>