Previous words

Tabs are a very common function in the Web. When the user clicks on the menu item, the corresponding content can be switched out. This article will introduce the Bootstrap tab in detail

Basic usage

The tab in the Bootstrap framework mainly consists of two parts:

　1. Tab The menu component corresponds to Bootstrap's nav-tabs

2. The switchable tab panel component is usually represented by tab-pane in Bootstrap

In the Bootstrap framework, tab nav- The tabs have styles, and the panel content tab-pane is hidden. Only the current panel content is displayed.

.tab-content?>?.tab-pane?{display:?none;
}.tab-content?>?.active?{display:?block;
}

The tab defines the data attribute to trigger the switching effect. Of course, the prerequisite is to load bootstrap.js or tab.js first. Declarative triggering tabs need to meet the following requirements:

1. Set data-toggle="tab"

in the tab navigation link 2. And set data-target=" corresponding The selector of the content panel (usually ID)"; if it is a link, you can also use href="the selector of the corresponding content panel (usually ID)". The main function is that the user can find the selector corresponding to it when clicking The panel content tab-pane.

3. The panel content is uniformly placed in the tab-content container, and each content panel tab-pane needs to set an independent selector (preferably ID) and the data-target or data-target in the tab. The value of href matches

<!-- 選項(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>

[Fade-in effect]

In order to make the hiding and display of the panel more effective during the switching process Smooth, you can add the class name fade in the panel to produce a gradual effect.

When adding the fade style, the initial default displayed content panel must be added with the in class name, otherwise the user will not be able to see its content

<!-- 選項(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>

【Capsule Tab】

In Bootstrap, in addition to allowing nav-tabs to have the tab switching function, the capsule nav-pills navigation can also have the tab function. . Just replace nav-tabs with nav-pills. Another key point is to replace data-toggle="tab" with 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 trigger

In addition to setting data-toggle in HTML to trigger tabs, you can also directly use JavaScript transfer.

Call the tab("show") method in the click event of each link to display the corresponding tab panel content. For the above example, delete the custom data-toggle="tab" or data-toggle="pill" attributes in HTML, and then call

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

公告
規(guī)則
論壇
安全
公益
公告內(nèi)容面板
規(guī)則內(nèi)容面板
論壇內(nèi)容面板
安全內(nèi)容面板
公益內(nèi)容面板
<script>$(function(){
????$(&quot;#myTab?a&quot;).click(function(e){
????????e.preventDefault();
????????$(this).tab(&quot;show&quot;);
????});
})</script>

【Event Subscription】

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>

+function?($)?{//使用es5嚴(yán)格模式'use?strict';//}(window.jQuery);

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

??//show()方法用于觸發(fā)show事件，調(diào)用activate原型方法，觸發(fā)shown事件
??Tab.prototype.show?=?function?()?{//當(dāng)前tabvar?$this????=?this.element//找到最近的ulvar?$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)前tabthis.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?{//否則刪除fadeelement.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')
??}

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

??$.fn.tab.noConflict?=?function?()?{?????//恢復(fù)以前的舊代碼$.fn.tab?=?old//將$.fn.tab.noConflict()設(shè)置為Bootstrap的Tab插件return?this
??}

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

The above is the detailed content of Explanation of tab function in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!