簡單的標籤頁

程式碼：

<h1 class="page-header">4.3標籤頁</h1>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">Home</a></li>
		<li><a href="#">Profile</a></li>
		<li><a href="#">Message</a></li>
	</ul>

給上面的先預定義一些href的標籤ID,新增一個下拉選單

<ul class="nav nav-tabs">
      <li><a href="#home" >Home</a></li>
      <li><a href="#profile" >Profile</a></li>
      <li><a href="#messages" >Messages</a></li>
      <li><a href="#settings" >Settings</a></li>
      <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li ><a href="#AAA">@tag</a></li>
            <li ><a href="#BBB">@mag</a></li>
        </ul>
      </li>  
    </ul>
 

將標籤頁中的a標籤都添加了一個屬性data-toggle="tab"

然後在下面新增一個div的容器，並給與tab-content的樣式類。

容器裡面定義div，然後在div上新增id屬性，和上面的href的標籤ID對應，並新增tab-pane的樣式類，其中一個如下，當然這個裡面還添加了一個active的樣式類，目的就是預設啟用

<div class="tab-pane active" id="home">

最終現在每個標籤頁都可以進行點選，並且下拉選單的選單想也是可以點選，對應著我們為tab-content中定義的標籤內容頁。

可以看出上面的操作我們都是通過data屬性就可以實現標籤切換和內容展示的。

擴充套件了標籤頁式導航

此外掛為標籤頁式導航元件添加了標籤頁內容區。

用法

通過JavaScript啟動可切換標籤頁（每個標籤頁單獨被啟用）：

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

去掉所有a標籤的data-toggle然後呼叫js

可以有以下幾種方式單獨啟用標籤頁：

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

只需為頁面元素簡單的新增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的資訊
})

<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  //e.target // activated tab
  //e.relatedTarget // previous tab
	alert("目標："+e.target);
	alert("相關："+e.relatedTarget);
	})
</script>

漸入效果

為每個.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>