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

シンプルなタブページ

コード:

[javascript] view plaincopy

& lt;h1 class="ページヘッダー">4.3タブ3c1ec8bf6da50ad32ed82a08359a11d2 ef5dc968b76d5ea7ce8b8602c8c59a96ee7959cc8dd4be16ef633321c03dac32ホーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb /li>

[javascript]

プレーンコピーを表示

d298440dd905fd5f04aa68386d2e1df5 ;bed06894275b65c1ab86501b08a632eb

タグページにすべてのタグを追加します 属性 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

   1. 8019067d09615e43c7904885b5246f0a  
   2. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
   3.   //e.target // activated tab  
   4.   //e.relatedTarget // previous tab  
   5.     alert("目标："+e.target);  
   6.     alert("相关："+e.relatedTarget);  
   7.     })  
   8. 2cacc6d41bbb37262a98f745aa00fbf0  

    

    

    

   渐入效果

    

   为每个.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>