本篇文章帶大家一起了解下Bootstrap中的tab選項(xiàng)卡。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
選項(xiàng)卡Tabs是Web中一種非常常用的功能。用戶點(diǎn)擊對(duì)菜單項(xiàng)，能切換出對(duì)應(yīng)的內(nèi)容。本文將詳細(xì)介紹
基本用法
Bootstrap框架中的選項(xiàng)卡主要有兩部分內(nèi)容組成：
1、選項(xiàng)卡菜單組件，對(duì)應(yīng)的是 Bootstrap的 nav-tabs
2、可以切換的選項(xiàng)卡面板組件，在 Bootstrap 中通常 tab-pane 來(lái)表示
在Bootstrap框架中選項(xiàng)卡nav-tabs已帶有樣式，而對(duì)于面板內(nèi)容tab-pane都是隱藏的，只有當(dāng)前面板內(nèi)容才是顯示的
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}選項(xiàng)卡定義data屬性來(lái)觸發(fā)切換效果。當(dāng)然前提要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求：
1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab"
2、并且設(shè)置 data-target="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)"；如果是鏈接的話，還可以通過(guò) href="對(duì)應(yīng)內(nèi)容面板的選擇符(一般是ID)"，主要作用是用戶點(diǎn)擊的時(shí)候能找到該選擇符所對(duì)應(yīng)的面板內(nèi)容 tab-pane。
3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個(gè)內(nèi)容面板 tab-pane 都需要設(shè)置一個(gè)獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的 data-target 或 href 的值匹配
<!-- 選項(xiàng)卡菜單--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane " id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane " id="forum">論壇內(nèi)容面板</div> <div class="tab-pane " id="security">安全內(nèi)容面板</div> <div class="tab-pane " id="welfare">公益內(nèi)容面板</div> </div>
【漸入效果】
為了讓面板的隱藏與顯示在切換的過(guò)程效果更流暢，可以在面板中添加類(lèi)名 fade，讓其產(chǎn)生漸入的效果。
在添加 fade 樣式時(shí)，最初的默認(rèn)顯示的內(nèi)容面板一定要加上 in 類(lèi)名，不然用戶無(wú)法看到其內(nèi)容
<!-- 選項(xiàng)卡菜單--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div>
【膠囊式選項(xiàng)卡】
在Bootstrap除了可以讓 nav-tabs 具有選項(xiàng)卡的切換功能之外，還可以讓膠囊式 nav-pills 導(dǎo)航也具有選項(xiàng)卡的功能。只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點(diǎn)是將 data-toggle="tab"換成data-toggle="pill"
<!-- 選項(xiàng)卡菜單--> <ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li> <li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li> <li><a href="#security" role="tab" data-toggle="pill">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div>
JS觸發(fā)
除了在HTML設(shè)置 data-toggle 來(lái)觸發(fā)選項(xiàng)卡之外，還可以通過(guò)JavaScript直接調(diào)用。
在每個(gè)鏈接的單擊事件中調(diào)用tab("show")方法，顯示對(duì)應(yīng)的標(biāo)簽面板內(nèi)容。針對(duì)上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過(guò)下面的腳本來(lái)調(diào)用
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})<!-- 選項(xiàng)卡菜單-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab">公告</a></li>
<li><a href="#rule" role="tab" >規(guī)則</a></li>
<li><a href="#forum" role="tab" >論壇</a></li>
<li><a href="#security" role="tab" >安全</a></li>
<li><a href="#welfare" role="tab" >公益</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<script>
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
</script>
【事件訂閱】
show.bs.tab show方法調(diào)用之后立即觸發(fā)該事件 shown.bs.tab 此事件在tab已經(jīng)顯示出來(lái)（并且同時(shí)在 CSS 過(guò)渡效果完成）之后被觸發(fā) hide.bs.tab hide方法調(diào)用之后立即觸發(fā)該事件。 hidden.bs.tab 此事件在tab被隱藏（并且同時(shí)在 CSS 過(guò)渡效果完成）之后被觸發(fā)
<!-- 選項(xiàng)卡菜單-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab">公告</a></li>
<li><a href="#rule" role="tab" >規(guī)則</a></li>
<li><a href="#forum" role="tab" >論壇</a></li>
<li><a href="#security" role="tab" >安全</a></li>
<li><a href="#welfare" role="tab" >公益</a></li>
</ul>
<!-- 選項(xiàng)卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<script>
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
$("#myTab").on("show.bs.tab",function(e){
$(e.target).css('outline','1px solid black');
}).on("hide.bs.tab",function(e){
$(e.target).css('outline','none');
})
})
</script>
JS源碼
【1】IIFE
使用立即調(diào)用函數(shù)，防止插件內(nèi)代碼外泄，從而形成一個(gè)閉環(huán)，并且只能從jQuery的fn里進(jìn)行擴(kuò)展
function ($) {
//使用es5嚴(yán)格模式
'use strict';
//
}(window.jQuery);【2】初始設(shè)置
var Tab = function (element) {
//指定當(dāng)前元素
this.element = $(element)
}
//版本號(hào)為3.3.7
Tab.VERSION = '3.3.7'
//動(dòng)畫(huà)時(shí)間為150ms
Tab.TRANSITION_DURATION = 150【3】插件核心代碼
//show()方法用于觸發(fā)show事件，調(diào)用activate原型方法，觸發(fā)shown事件
Tab.prototype.show = function () {
//當(dāng)前tab
var $this = this.element
//找到最近的ul
var $ul = $this.closest('ul:not(.dropdown-menu)')
//找到data-target值
var selector = $this.data('target')
//如果data-target值不存在，查找href值
if (!selector) {
selector = $this.attr('href')
//IE7特殊處理
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '')
}
//如果當(dāng)前tab已經(jīng)是活動(dòng)狀態(tài)了，即父元素li上已經(jīng)有active樣式的話，直接返回
if ($this.parent('li').hasClass('active')) return
//找到上一個(gè)元素，即上一個(gè)帶有active樣式的li里的a元素
var $previous = $ul.find('.active:last a')
//設(shè)置hide事件
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})
//設(shè)置show事件
var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})
//觸發(fā)hide事件及show事件
$previous.trigger(hideEvent)
$this.trigger(showEvent)
//如果自定義回調(diào)中阻止了默認(rèn)行為，則不再繼續(xù)處理
if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
//要激活顯示的面板，即target或href里的值所對(duì)應(yīng)的元素
var $target = $(selector)
//高亮顯示當(dāng)前tab
this.activate($this.closest('li'), $ul)
//顯示對(duì)應(yīng)的面板，并在回調(diào)里觸發(fā)hidden及shown事件
this.activate($target, $target.parent(), function () {
$previous.trigger({
type: 'hidden.bs.tab',
relatedTarget: $this[0]
})
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: $previous[0]
})
})
}
//active樣式的應(yīng)用，面板的顯示和隱藏，以及tab的高亮與反高亮
Tab.prototype.activate = function (element, container, callback) {
//查找當(dāng)前容器所有有active樣式的元素
var $active = container.find('> .active')
//判斷是使用回調(diào)還是動(dòng)畫(huà)
var transition = callback
&& $.support.transition
&& ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)
function next() {
$active
//去除其他元素的active樣式
.removeClass('active')
//包括li元素里面的下拉菜單里的active樣式也要去除
.find('> .dropdown-menu > .active')
.removeClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', false)
element
//給當(dāng)前被單擊的元素添加active高亮樣式
.addClass('active')
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
if (transition) {
//如果支持動(dòng)畫(huà)，就重繪頁(yè)面
element[0].offsetWidth
//并添加in樣式，去除透明
element.addClass('in')
} else {
//否則刪除fade
element.removeClass('fade')
}
//如果單擊的是下拉菜單里的項(xiàng)目
if (element.parent('.dropdown-menu').length) {
element
//打到最近的li.dropdown元素進(jìn)行高亮
.closest('li.dropdown')
.addClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
}
//如果有回調(diào)就執(zhí)行回調(diào)
callback && callback()
}
//如果支持動(dòng)畫(huà)
$active.length && transition ?
$active
//在動(dòng)畫(huà)結(jié)束后執(zhí)行next()
.one('bsTransitionEnd', next)
.emulateTransitionEnd(Tab.TRANSITION_DURATION) :
next()
$active.removeClass('in')
}【4】jQuery插件定義
function Plugin(option) {
//根據(jù)選擇器，遍歷所有符合規(guī)則的元素
return this.each(function () {
var $this = $(this)
//獲取自定義屬性bs.tab的值
var data = $this.data('bs.tab')
//如果值不存在，則將Tab實(shí)例設(shè)置為bs.tab值
if (!data) $this.data('bs.tab', (data = new Tab(this)))
//如果option傳遞了string，則表示要執(zhí)行某個(gè)方法
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.tab
//保留其他庫(kù)的$.fn.tab代碼(如果定義的話)，以便在noConflict之后可以繼續(xù)使用該老代碼
$.fn.tab = Plugin
//重設(shè)插件構(gòu)造器，可以通過(guò)該屬性獲取插件的真實(shí)類(lèi)函數(shù)
$.fn.tab.Constructor = Tab【5】防沖突處理
$.fn.tab.noConflict = function () {
//恢復(fù)以前的舊代碼
$.fn.tab = old
//將$.fn.tab.noConflict()設(shè)置為Bootstrap的Tab插件
return this
}【6】綁定觸發(fā)事件
var clickHandler = function (e) {
//阻止默認(rèn)行為
e.preventDefault()
//觸發(fā)show()方法
Plugin.call($(this), 'show')
}
$(document)
//在document上綁定單擊事件
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
