Bootstrap學習js插件篇之標簽頁

簡單的標簽頁

代碼：

 

<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>