Bootstrap之javascript插件---Togglable tabs（標簽頁）

簡介：

　　標簽頁是一個經常使用的組件，可以放置較多的內容，又可以節省頁面空間。

代碼示例：

  <div>
<!-- 標簽 -->
    <!-- Nav tabs 標簽導航-->
    <ul class="nav nav-tabs" role="tablist">
<!-- 標簽對應着內容 #home，#profile，#messages -->
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
<!-- 標簽的內容 -->
    <!-- Tab panes 選項卡窗格-->
    <div class="tab-content">
<!-- 此處的id對應標簽中的a的href鏈接 -->
      <div role="tabpanel" class="tab-pane active" id="home">...</div>
      <div role="tabpanel" class="tab-pane" id="profile">...</div>
      <div role="tabpanel" class="tab-pane" id="messages">...</div>
      <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>

  </div>

　　無需寫任何javascript代碼，只需簡單的為頁面元素指定 data-toggle="tab"

　　為ul添加 nav 和 nav-tabs class

用法：　　

通過 JavaScript 啟用 tabbable 選項卡（每個選項卡需要單獨激活）：

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

可以通過多種方式激活單個選項卡：

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

 

 

 

詳細js底層實現請參照官方文檔。---END