jQuery選項卡外掛程式

html結構

<

ul id
="tabs"
class
="tabs"
>
<
li data-tab
="users"
>users
li>
<
li data-tab
="groups"
>groups
li>
ul>
<
div 
id="tabscontent"
class
="tabscontent"
>
<
div 
data-tab
="users"
class
="tab-item"
> item1 
div>
<
div 
data-tab
="groups"
class
="tab-item"
> item2 
div>
div>

css樣式

.tabs.tabs li.tabs li.active.tabscontent.tabscontent .tab-item.tabscontent .active

js指令碼

(function

($) );
第一步：改變li.active
$element.bind("change.tab", function
(e, tabname) );
第二步：改變tab-item.active
$element.bind("change.tab", function
(e, tabname) );
//啟用第乙個選項卡
$element.trigger("change.tab", $element.find("li:first").attr("data-tab"));
return
this;  //
返回鏈式呼叫
};})(jquery);
//基本示例
$("#tabs").tabs("#tabscontent");
/** 應用擴充套件
* 切換時將tabname寫入hash
* 當hashchange的時候觸發tabs切換
*///
當切換的時候，把tabname寫入hash
$("#tabs").bind("change.tab", function
(e, tabname) );
//目前除了 ie67 外都原生支援 hashchange 事件
$(window).bind("hashchange", function
() );

簡單的jquery選項卡外掛程式

其實像這類選項卡的外掛程式網上也很多，只是個人覺得自己弄乙個更好，畢竟自己弄的東西，自己修改起來也輕鬆。原理其實也是很簡單的，關鍵在於樣式的定義。原本想直接使用jquery的 ui，無奈懶得理，感覺jquery ui很強大，但是用起來也很麻煩，要引用的樣式也多。主要是樣式不好修改。並且我也只想使用選...

縱向選項卡jquery

效果如下 html部分 div id ad ul id tab left li a href 選項卡1 a li li a href 選項卡2 a li li a href 選項卡3 a li li a href 選項卡4 a li ul ul id tab con li img src 2018a...

選項卡套選項卡

實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換，且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器，乙個控制外層選卡，乙個控制內層選卡。仔細分析發現，外層選項卡的切換是需要在內層選卡全部切換完...