簡單的jquery選項卡外掛程式

2021-06-16 08:00:15 字數 767 閱讀 9010

其實像這類選項卡的外掛程式網上也很多,只是個人覺得自己弄乙個更好,畢竟自己弄的東西,自己修改起來也輕鬆。

原理其實也是很簡單的,關鍵在於樣式的定義。

原本想直接使用jquery的 ui,無奈懶得理,感覺jquery ui很強大,但是用起來也很麻煩,要引用的樣式也多。主要是樣式不好修改。

並且我也只想使用選項卡的功能,何必整這麼多樣式呢。最主要的還是不好修改樣式。

這是選項卡一的內容?

這是選項卡一的內容?

這是選項卡一的內容?

這是選項卡一的內容?

這是選項卡一的內容?

這是選項卡一的內容?

這是選項卡一的內容?

這是選項卡二的內容?

這是選項卡二的內容?

這是選項卡二的內容?

這是選項卡二的內容?

這是選項卡二的內容?

這是選項卡二的內容?

這是選項卡二的內容?

這是選項卡三的內容?

這是選項卡三的內容?

這是選項卡三的內容?

這是選項卡三的內容?

這是選項卡三的內容?

這是選項卡三的內容?

這是選項卡三的內容?

經測試在ie6+,ie6+下都能正常使用。相容還是很好的。

來幾張圖吧:

這是火狐8.0下的效果,圓角邊直接用樣式來定義

這是ie6.0下的效果,沒有圓角邊。

jquery ui的選項卡ui在ie6.0下是不正常的,呵呵,被我修復了這個問題。

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

縱向選項卡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...

jquery實現簡單的選項卡功能

html部分 id pro menu class tabfocus 選單一li id jjb 選單二li id dydb 選單三li id dydb 選單四li ul id pro content 這是選單一的內容li 這是選單二的內容li 這是選單三的內容li 這是選單四的內容li ul css部...