全面解析Bootstrap中tab（選項卡）的使用方法
更新時間：2016年06月06日 08:56:04 投稿：lijiao
這篇文章主要為大家全面解析Bootstrap中tab（選項卡）的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家介紹實現(xiàn)tab選項卡的應用，此插件相對比較簡單，具體內(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、對導航元素增加aria-expanded屬性，標記此元素是否處于展開狀態(tài)
2.2、利用reflow機制，用獲取offsetWidth屬性來實現(xiàn)部分重繪
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
本文系列教程整理到：Bootstrap基礎教程 專題中，歡迎點擊學習。
以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設計有所幫助。
相關文章
下面是一段利用谷歌地圖API獲取點點之間距離的代碼，采用V3版本中的DirectionsService()2012-10-10
這篇文章主要介紹了JS中捕獲console.log()輸出的方法,實例分析了實現(xiàn)獲取console.log輸出的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家介紹了Three.js中實現(xiàn)Bloom效果及完整示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)水平時間軸，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
javascript實現(xiàn)動態(tài)時鐘的啟動和停止
這篇文章主要為大家詳細介紹了javascript實現(xiàn)動態(tài)時鐘的啟動和停止文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式來實現(xiàn)的,下面這篇文章主要給大家介紹了關于如何利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了一個不錯的js html頁面倒計時可精確到秒,很簡單，但和實用，需要的朋友可以參考下2014-10-10
在Web開發(fā)領域,響應式設計已經(jīng)成為一個不可或缺的趨勢,PostCSS插件——postcss-pxtorem的出現(xiàn)為我們提供了一種更加智能和高效的解決方案,本文將深入探討postcss-pxtorem的使用,包括其背后的原理、配置選項、實際應用中的注意事項等方面,需要的朋友可以參考下2023-12-12
原型(prototype)定義了特定類型的所有實例都可以訪問的屬性和方法，很多些情況下需要重新對原型中的屬性賦值，下面為大家介紹下如何修改原型2014-01-01
微信小程序外賣選購頁實現(xiàn)切換分類與數(shù)量加減功能案例
這篇文章主要介紹了微信小程序外賣選購頁實現(xiàn)切換分類與數(shù)量加減功能,結合具體實例形式分析了微信小程序狀態(tài)記錄、判定及數(shù)值運算相關操作技巧,需要的朋友可以參考下2019-01-01