jQuery選項卡外掛程式

2022-08-02 03:51:12 字數 1435 閱讀 8525

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...

選項卡套選項卡

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