jquery實現簡單的選項卡功能

2021-07-05 09:05:31 字數 555 閱讀 9735

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部分

*

ulli

#pro_menu

#pro_menu

li.tabfocus

#pro_content

jquery部分

$(function

();//初始預設顯示乙個,其他隱藏

$(this).click(function

());

})

})

簡單的jquery選項卡外掛程式

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

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