本文實(shí)例為大家介紹實(shí)現(xiàn)tab選項(xiàng)卡的應(yīng)用，此插件相對(duì)比較簡(jiǎn)單，具體內(nèi)容如下
源碼文件：
tab.js

實(shí)現(xiàn)原理：
1、單擊一個(gè)元素時(shí)，首先將原來高亮的元素取消
2、然后給被單擊元素進(jìn)行高亮
3、如果單擊元素是下拉框中某個(gè)選項(xiàng)，則選中本身，還要選中下拉框
5、如果定義了動(dòng)畫，先執(zhí)行動(dòng)畫，然后回調(diào)

源碼分析：
1、Show方法，是在單擊一個(gè)元素的時(shí)候觸發(fā)，會(huì)觸發(fā)如下四個(gè)事件
  1.1、Hiden.bs.tab：隱藏上一個(gè)元素
  1.2、Show.bs.tab：顯示當(dāng)前元素
  1.3、Hideen.bs.tab：隱藏上一個(gè)元素完成
  1.4、Shown.bs.tab：顯示當(dāng)前元素完成
  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：激活當(dāng)前對(duì)象
  2.1、對(duì)導(dǎo)航元素增加aria-expanded屬性，標(biāo)記此元素是否處于展開狀態(tài)
  2.2、利用reflow機(jī)制，用獲取offsetWidth屬性來實(shí)現(xiàn)部分重繪

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點(diǎn)擊學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。