鍍金池/ 教程/ HTML/ 標(biāo)簽頁(yè)
警告框
標(biāo)簽頁(yè)
代碼
輪播
進(jìn)度條
輔助類
按鈕組
社區(qū)
標(biāo)簽
導(dǎo)航
響應(yīng)式工具
禁止響應(yīng)式布局
工具提示
概覽
媒體對(duì)象
概覽
具有響應(yīng)式特性的嵌入內(nèi)容
Well
折疊
下載
對(duì)第三方組件的支持
Glyphicons 字體圖標(biāo)
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設(shè)備的支持情況
輸入框組
表格
滾動(dòng)監(jiān)聽
下拉菜單
排版
巨幕
按鈕
頁(yè)頭
使用 Sass
包含的內(nèi)容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導(dǎo)航
分頁(yè)
導(dǎo)航條
警告框
過渡效果
從 v2.x 版本升級(jí)到 v3.x 版本
工具
可訪問性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

標(biāo)簽頁(yè)

之前通過組件只是簡(jiǎn)單的學(xué)習(xí)過這樣的。

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

當(dāng)然效果就是這樣，只是默認(rèn)的激活了第一個(gè)標(biāo)簽 Home，然后不能點(diǎn)擊。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt1.png" alt="" />

現(xiàn)在我們來優(yōu)化一下。

我們給上面的先預(yù)定義一些 href 的標(biāo)簽 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>

并且添加了一個(gè)下拉菜單。

http://wiki.jikexueyuan.com/project/bootstrap/images/bt2.jpg" alt="" />

然后現(xiàn)在我們繼續(xù)的修正代碼

<ul class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">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 data-toggle="tab" href="#AAA">@tag</a></li>
            <li ><a data-toggle="tab" href="#BBB">@mag</a></li>
        </ul>
      </li>  
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="home">1..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="profile">2..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="messages">3..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="settings">4..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="AAA">A..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="BBB">B..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> </div>
    </div>

將標(biāo)簽頁(yè)中的 a 標(biāo)簽都添加了一個(gè)屬性 data-toggle="tab"。

然后在下面添加一個(gè) div 的容器，并給與 tab-content 的樣式類。

容器里面定義 div，然后在 div 上添加 id 屬性，和上面的 href 的標(biāo)簽 ID 對(duì)應(yīng)，并添加 tab-pane 的樣式類，其中一個(gè)如下，當(dāng)然這個(gè)里面還添加了一個(gè) active 的樣式類，目的就是默認(rèn)激活。

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

http://wiki.jikexueyuan.com/project/bootstrap/images/bt3.jpg" alt="" />

最終現(xiàn)在每個(gè)標(biāo)簽頁(yè)都可以進(jìn)行點(diǎn)擊，并且下拉菜單的菜單想也是可以點(diǎn)擊，對(duì)應(yīng)著我們?yōu)?tab-content 中定義的標(biāo)簽內(nèi)容頁(yè)。

可以看出上面的操作我們都是通過 data 屬性就可以實(shí)現(xiàn)標(biāo)簽切換和內(nèi)容展示的。

下面我們就通過 JavaScript 來進(jìn)行實(shí)現(xiàn)

用法

通過 JavaScript 啟動(dòng)可切換標(biāo)簽頁(yè)（每個(gè)標(biāo)簽頁(yè)單獨(dú)被激活）：

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

將所有代碼貼上

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <div class="container">
    <ul class="nav nav-tabs" id="myTab">
      <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>

    <div class="tab-content">
      <div class="tab-pane active" id="home">1..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="profile">2..Rawwilliamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="messages">3..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcherwilliamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. voluptate nisi qui.</div> <div class="tab-pane" id="settings">4..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu bawilliamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.nh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="AAA">A..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irwilliamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.ure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> <div class="tab-pane" id="BBB">B..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irwilliamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.ure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div> </div>
    </div>
 <script src="js/jquery-2.0.3.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript"> $('#myTab a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    }) </script>
 </body>
 </html>

View Code

就是將前面的代碼 a 標(biāo)簽中的 data-toggle 屬性去掉，這樣應(yīng)該就找不到下面的 tab 內(nèi)容了，所以內(nèi)容無法進(jìn)行切換。

不過我們可以通過上面的 JavaScript 進(jìn)行點(diǎn)擊切換實(shí)現(xiàn)。

可以有以下幾種方式單獨(dú)激活標(biāo)簽頁(yè)：

$('#myTab a[href="#profile"]').tab('show') 
$('#myTab a:first').tab('show') 
$('#myTab a:last').tab('show')
$('#myTab li:eq(2) a').tab('show')

只需要添加相應(yīng)的事件進(jìn)行調(diào)用就可以了。

只需為頁(yè)面元素簡(jiǎn)單的添加 data-toggle="tab" 或 data-toggle="pill" 就可以無需寫任何 JavaScript 代碼也能激活標(biāo)簽頁(yè)或膠囊式導(dǎo)航。為 ul 添加 .nav 和 .nav-tabs classe 即可為其賦予 Bootstrap 標(biāo)簽頁(yè)樣式；而添加 nav 和 nav-pills class 可以為其賦予膠囊標(biāo)簽頁(yè)。

可以通過 jQuery 來執(zhí)行首次的加載

<script> $(function () {
    $('#myTab a:first').tab('show')
  }) </script>

事件

http://wiki.jikexueyuan.com/project/bootstrap/images/bt4.jpg" alt="" />

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target //通過此參數(shù)可以獲得激活的tab信息  e.relatedTarget // 激活之前的那一個(gè)tab的信息 })