全面解析Bootstrap中tab（選項卡）的使用方法
更新時間：2016年06月06日 08:56:04 投稿：lijiao
這篇文章主要為大家全面解析Bootstrap中tab（選項卡）的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家介紹實現(xiàn)tab選項卡的應(yīng)用，此插件相對比較簡單，具體內(nèi)容如下
源碼文件：
tab.js
實現(xiàn)原理：
1、單擊一個元素時，首先將原來高亮的元素取消
2、然后給被單擊元素進行高亮
3、如果單擊元素是下拉框中某個選項，則選中本身，還要選中下拉框
5、如果定義了動畫，先執(zhí)行動畫，然后回調(diào)
源碼分析：
1、Show方法，是在單擊一個元素的時候觸發(fā)，會觸發(fā)如下四個事件
1.1、Hiden.bs.tab：隱藏上一個元素
1.2、Show.bs.tab：顯示當前元素
1.3、Hideen.bs.tab：隱藏上一個元素完成
1.4、Shown.bs.tab：顯示當前元素完成
1.5、Hiden/show事件源碼：
var $previous = $ul.find('.active:last a')
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})
var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})
2、Active：激活當前對象
2.1、對導(dǎo)航元素增加aria-expanded屬性，標記此元素是否處于展開狀態(tài)
2.2、利用reflow機制，用獲取offsetWidth屬性來實現(xiàn)部分重繪
如果大家還想深入學(xué)習，可以點擊這里進行學(xué)習，再為大家附3個精彩的專題：
本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點擊學(xué)習。
以上就是本文的全部內(nèi)容，希望對大家學(xué)習javascript程序設(shè)計有所幫助。
相關(guān)文章
jsGantt是一個可定制的、靈活的、多語言的甘特圖組件，由原生 JavaScript構(gòu)建，它使用客戶端渲染以獲得快速的性能和動態(tài)的交互性，非常適用于任何需要交互式時間線或時間表顯示的項目，本文就給大家介紹一下JavaScript多功能甘特圖組件jsGantt2023-07-07
下面小編就為大家?guī)硪黄狫avascript簡寫條件語句(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Javascript hasOwnProperty 方法 & in 關(guān)鍵字
hasOwnProperty :如果 object 具有指定名稱的屬性，那么方法返回 true；反之則返回 false。2008-11-11
這篇文章主要給大家介紹了關(guān)于vue中slot（插槽）的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習或者使用vue具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-08-08
大家對下拉菜單并不陌生吧，下面為大家介紹下使用js實現(xiàn)下拉菜單語言選項，具體實現(xiàn)如下，喜歡的朋友可以看看2013-09-09
Bootstrap Fileinput 4.4.7文件上傳實例詳解
這篇文章主要為大家詳細介紹了Bootstrap Fileinput 4.4.7文件上傳實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要為大家詳細介紹了純JS實現(xiàn)簡單日歷的的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript 中判斷變量是否為數(shù)字的示例代碼
這篇文章主要介紹了JavaScript 中判斷變量是否為數(shù)字的示例代碼,代碼簡單易懂對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
JavaScript 中的 Object 是一種非常靈活且強大的數(shù)據(jù)類型,它允許我們創(chuàng)建和操作鍵值對,在本文中,我們將深入探討 Object 的一些重要屬性,以便更好地理解和利用這個關(guān)鍵的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JS正則表達式完美實現(xiàn)身份證校驗功能,需要的朋友可以參考下2017-10-10