切換卡或叫標簽頁組件。它與scrollspy組件一樣，分為兩部分，觸發區與面板區。觸發區用於綁定點擊事件，切換對應的面板。
切換區為一個UL列表，要求UL帶"nav nav-tabs"或"nav nav-pills"這兩種類名。li下的標簽要求有 data-toggle="tab"屬性，你可以通過data-target或href指定對應的面板。
面板區要求就相對寬松些，容器要求帶"tab-content"類名，下面的每個面板都要求帶"tab-pane"類名。
<ul id="mytab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
<li><a href="#profile" data-toggle="tab">介紹</a></li>
<li><a href="#messages" data-toggle="tab">消息</a></li>
<li><a href="#settings" data-toggle="tab">設置</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">111</div>
<div class="tab-pane" id="profile">2222</div>
<div class="tab-pane" id="messages">333</div>
<div class="tab-pane" id="settings">444.</div>
</div>
這樣你直接引入JS就能用了，但你必須為當中某個標簽頁的LI元素指定"active"類名
如果你想用JS明確指定哪個面板被激活，你是要對它的某個標簽頁的鏈接使用tab("show")方法，而不是作用於它的容器上。這個與其他jQuery插件有點不同。
$(function () {
$('.nav-tabs a:last').tab('show')
})
!function ($) {
"use strict"; // jshint ;_;
/* TAB CLASS DEFINITION
* ==================== */
var Tab = function (element) {
this.element = $(element)
}
//整個控件分兩部分,觸發區與面板區
Tab.prototype = {
constructor: Tab ,
//這是用於切換觸發區與相關事件,並在里面調用切換面板的activate
show: function () {
var $this = this.element
, $ul = $this.closest('ul:not(.dropdown-menu)')//找到觸發區的容器
, selector = $this.attr('data-target')//取得對應的面板的CSS表達式
, previous
, $target
, e
if (!selector) {
selector = $this.attr('href')//沒有則從href得到
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
if ( $this.parent('li').hasClass('active') ) return
previous = $ul.find('.active:last a')[0]//對得之前被激活的鏈接
e = $.Event('show', {
relatedTarget: previous
})
$this.trigger(e)
if (e.isDefaultPrevented()) return
$target = $(selector)
this.activate($this.parent('li'), $ul)
this.activate($target, $target.parent(), function () {
$this.trigger({
type: 'shown'
,
relatedTarget: previous
})
})
} ,
//這方面不應該放到原型上，應該做成私有方法
activate: function ( element, container, callback) {
var $deactivate = container.find('> .active')
, transition = callback
&& $.support.transition
&& $deactivate.hasClass('fade')
function next() {
//讓之前的處於激活狀態處於激活狀態
$deactivate
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
//讓當前面板處於激活狀態
element.addClass('active')
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
//執行回調，目的是觸發shown事件
callback && callback()
}
transition ?
$deactivate.one($.support.transition.end, next) :
next()
//開始觸發CSS3 transition回調
$deactivate.removeClass('in')
}
}
/* TAB PLUGIN DEFINITION
* ===================== */
var old = $.fn.tab
$.fn.tab = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('tab')
if (!data) $this.data('tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()//show
})
}
$.fn.tab.Constructor = Tab
/* TAB NO CONFLICT
* =============== */
$.fn.tab.noConflict = function () {
$.fn.tab = old
return this
}
/* TAB DATA-API
* ============ */
//要求觸發區必須存在[data-toggle="tab"]或[data-toggle="pill"]屬性
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
}(window.jQuery);
它要引入navs.less