標籤頁（tab）通過結合一些 data 屬性，您可以輕鬆地建立乙個標籤頁介面。
"如果您想要單獨引用該外掛程式的功能，那麼您需要引用 tab.js。或者，正如 bootstrap 外掛程式概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。"
一、用法
您可以通過以下兩種方式啟用標籤頁：
通過 data 屬性：您需要新增 data-toggle="tab" 或 data-toggle="pill" 到錨文字鏈結中。
新增 n** 和 n**-tabs 類到 ul 中，將會應用 bootstrap 標籤樣式，新增 n** 和 n**-pills 類到 ul 中，將會應用 bootstrap 膠囊式樣式。
...通過 j**ascript：您可以使用 j**script 來啟用標籤頁，如下所示：
$('#mytab a').click(function (e) )
下面的例項演示了以不同的方式來啟用各個標籤頁：
// 通過名稱選取標籤頁
$('#mytab a[href="#profile"]').tab('show')
// 選取第乙個標籤頁
$('#mytab a:first').tab('show')
// 選取最後乙個標籤頁
$('#mytab a:last').tab('show')
// 選取第三個標籤頁（從 0 開始索引）
$('#mytab li:eq(2) a').tab('show')
二、淡入淡出效果
如果需要為標籤頁設定淡入淡出效果，請新增 .fade 到每個 .tab-pane 後面。第乙個標籤頁必須新增 .in 類，以便淡入顯示初始內容，如下面例項所示：
......
...j**a">...
三、方法
.$().tab：該方法可以啟用標籤頁元素和內容容器。標籤頁需要用乙個 data-target 或者乙個指向 dom 中容器節點的 href。
.....
........
四、事件
下表列出了標籤頁（tab）外掛程式中要用到的事件。這些事件可在函式中當鉤子使用。
五、基礎例項
1．標籤頁
標籤頁也就是通常所說的選項卡功能。
//基本用法
...
...
...
...//可以設定淡入淡出效果 fade，而 in 表示首選的內容預設顯示
//也可程式設計客棧以換成膠囊式
//data-target
使用 data-target 繫結或不繫結效果都是一樣的
//使用 j**ascript，直接使用 tab 方法。
$('#n** a').on('click', function(e) );
//事件，其他雷同
$('#n** a').on('show.bs.tab', function() );
$('#n** a').on('shown.bs.tab', function() );
本文系列教程整理到：bootstrap基礎教程 專題中，歡迎點選學習。
如果大家還想深入學習，可以點選這裡進行學習，再為大家附3個精彩的專題：
bootstrap學習教程
bootstrap實戰教程
bootstrap table使用教程式設計客棧程
bootstrap外掛程式使用教程
本文標題: bootstrap每天必學之標籤頁（tab）外掛程式
本文位址: /ruanjian/j**a/148264.html
Bootstrap每天必學之按鈕（一）
本文主要講解的是按鈕的樣式。1.選項 2.尺寸 3.活動狀態 4.禁用狀態 5.可做按鈕使用的html標籤 選項使用上面列出的class可以快速建立乙個帶有樣式的按鈕。尺寸需要讓按鈕具有不同尺寸嗎？使用.btn lg btn sm btn xs可以獲得不同尺寸的按鈕。通過給按鈕新增.btn bloc...
Bootstrap每天必學之導航條 二
一 基礎導航條 在程式設計客棧製作乙個基礎導航條時，主要分以下幾步 第一步 首先在製作導航的列表 基礎上新增類名 n bar n 第二步 在列表外部新增乙個容器 div 並且使用類名 n bar 和 n bar default logo 1 在web頁面製作中，常常在選單前面都會有乙個標題 文字字型...
PyQt5每天必學之組合框
qcombobox 是乙個允許使用者從列表選項中選擇一項的控制項。usr bin python3 coding utf 8 pyqt5 教程 這個例子展示了如何使用qcombobox部件。作者 我的世界你曾經來過 部落格 最後編輯 2016年8月4日 import sys from pyqt5.qt...