Bootstrap 選項卡插件

選項卡在Bootstrap 導航的章節中已經有所介紹。 在本章節中我們將通過數據屬性來創建選項卡介面。

使用

您可以通過以下兩種方式啟用選項卡標籤：

  • 通過 data 屬性：你可以通過添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。

    添加 nav 和 nav-tabs 類到 ul 中。

    • <ul class="nav nav-tabs">
   <li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>

  • 通過 JavaScript: 你可以通過Javascript來啟用選項卡:

    $('#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 類，如下實例:

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="svn">...</div>
  <div class="tab-pane fade" id="ios">...</div>
  <div class="tab-pane fade" id="java">...</div>
</div>

以下實例展示了使用data數據的選項卡及其淡入淡出的效果：

<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         Tutorial Point 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>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technoligies and explains
         each of the technology with simple examples. You also have a
         <b>tryit</b> editor, wherein you can edit your code and
         try out different possibilities of the examples.</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS is a mobile operating system developed and distributed by Apple
         Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the
         Darwin foundation. iOS is Apple's mobile version of the
         OS X operating system used on Apple computers.</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure
      Java application for load and performance testing.</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture
         for building highly scalable and robust enterprise level
         applications to be deployed on J2EE compliant
         Application Server such as JBOSS, Web Logic etc.
      </p>
   </div>
</div>

線上實例演示

方法

$().tab: 這個方法可以啟動選項卡元素和內容容器。選項卡需要用一個data-target或者和在 DOM 中一個href的容器節點。

<ul class="nav nav-tabs" id="myTab">
  <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>

以下實例展示了使用選項卡插件的方法 .tab。 實例中第二個選項卡 iOS 被啟動。

<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      Tutorial Point 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>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technoligies and explains
         each of the technology with simple examples. You also have a
         <b>tryit</b> editor, wherein you can edit your code and
         try out different possibilities of the examples.</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS is a mobile operating system developed and distributed by Apple
         Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the
         Darwin foundation. iOS is Apple's mobile version of the
         OS X operating system used on Apple computers.</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure
      Java application for load and performance testing.</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture
         for building highly scalable and robust enterprise level
         applications to be deployed on J2EE compliant
         Application Server such as JBOSS, Web Logic etc.
      </p>
   </div>
</div>
<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

事件

以下表格列出了選項卡插件的事件。 該事件可在函數中當勾子使用。

事件描述實例
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 // 前一個選項卡
})

以下實例展示了是插件事件的使用，實例中將顯示當前及先前訪問過的選項卡：

<hr>
   <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
   <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      Tutorial Point 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>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technoligies and explains
         each of the technology with simple examples. You also have a
         <b>tryit</b> editor, wherein you can edit your code and
         try out different possibilities of the examples.</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS is a mobile operating system developed and distributed by Apple
         Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the
         Darwin foundation. iOS is Apple's mobile version of the
         OS X operating system used on Apple computers.</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure
      Java application for load and performance testing.</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture
         for building highly scalable and robust enterprise level
         applications to be deployed on J2EE compliant
         Application Server such as JBOSS, Web Logic etc.
      </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>

線上實例演示