本文實例為大家介紹實現tab選項卡的應用，此插件相對比較簡單，具體內容如下
源碼文件：
tab.js
實現原理：
1、單擊一個元素時，首先將原來高亮的元素取消
2、然後給被單擊元素進行高亮
3、如果單擊元素是下拉框中某個選項，則選中本身，還要選中下拉框
5、如果定義了動畫，先執行動畫，然後回調
源碼分析：
1、Show方法，是在單擊一個元素的時候觸發，會觸發如下四個事件
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屬性，標記此元素是否處於展開狀態
2.2、利用reflow機制，用獲取offsetWidth屬性來實現部分重繪
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
本文系列教程整理到：Bootstrap基礎教程 專題中，歡迎點擊學習。
以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。