Bootstrap 標籤頁

Bootstrap 標籤頁（Tab）外掛程式

標籤頁（Tab）在 Bootstrap 導覽元素一章中介紹過。透過結合一些 data 屬性，您可以輕鬆地建立一個標籤頁介面。透過這個外掛您可以把內容放置在標籤頁或是膠囊式標籤頁甚至是下拉式選單標籤頁中。

如果您想要單獨引用該外掛程式的功能，那麼您需要引用 tab.js。或者，如 Bootstrap 外掛程式概覽一章所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

您可以透過以下兩種方式啟用標籤頁：

#透過data 屬性：您需要新增data-toggle="tab" 或data-toggle="pill" 到錨文本連結中。
新增nav 和nav-tabs 類別到ul 中，將會套用Bootstrap 標籤樣式，新增nav#和nav-pills 類別到ul 中，將會套用Bootstrap 膠囊式樣式。

透過JavaScript ：您可以使用Javscript 啟用標籤頁，如下所示：

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

下面的實例示範了以不同的方式來啟動各個標籤頁：

// 透過名稱選取標籤頁
$('#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 類，以便淡入顯示初始內容，如下方實例所示：

實例

下面的實例示範了使用data 屬性的標籤頁（Tab）外掛程式及其淡入淡出的效果：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页（Tab）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         W3Cschool Home
      </a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java 
         <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolphp中文网是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。php先飞早入行——学的不仅是技术，更是梦想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>

</body>
</html>

執行實例»##點擊"執行實例" 按鈕查看線上實例

方法

.$().tab：此方法可以啟動標籤頁元素和內容容器。標籤頁需要用一個 data-target 或一個指向 DOM 中容器節點的 href。

  <li class="active"><a href="#identifier" data -toggle="tab">Home</a></li>
  .....
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  .....
</div>
<script> ;
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

###########################################################CC ##實例######下面的實例示範了標籤頁（Tab）外掛程式方法###.tab### 的用法。在本實例中，第二個標籤頁###iOS### 是啟動的：#########實例######

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页（Tab）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      W3Cschool Home</a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">
            jmeter</a>
         </li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">
            ejb</a>
         </li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolphp中文网是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。php先飞早入行——学的不仅是技术，更是梦想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>
<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

</body>
</html>

########運行實例» ######點擊"運行實例" 按鈕查看線上實例######

事件

下表列出了標籤頁（Tab）外掛程式中要用到的事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
show.bs.tab	#該事件在標籤頁顯示時觸發，但是必須在新標籤頁被顯示之前。分別使用 event.target 和 event.relatedTarget 來定位到啟動的標籤頁和前一個已啟動的標籤頁。	$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })
shown.bs.tab	該事件在標籤頁顯示時觸發，但必須在某個標籤頁已經顯示之後。分別使用 event.target 和 event.relatedTarget 來定位到啟動的標籤頁和前一個已啟動的標籤頁。	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })

實例

下面的實例示範了標籤頁（Tab）外掛事件的用法。在本實例中，將顯示目前和前一個已造訪的標籤頁：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页（Tab）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<hr>
   <p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
   <p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      W3Cschool Home</a></li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">
         Java <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolphp中文网是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。php先飞早入行——学的不仅是技术，更是梦想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>
<script>
   $(function(){
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // 获取已激活的标签页的名称
      var activeTab = $(e.target).text(); 
      // 获取前一个激活的标签页的名称
      var previousTab = $(e.relatedTarget).text(); 
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });
});
</script>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

Bootstrap 標籤頁

Bootstrap 標籤頁（Tab）外掛程式

用法

淡入淡出效果

實例

實例

事件

實例

實例

PHP中文網