基於jquery自己寫tab滑動門(通用版)_jquery

css:

複製程式碼 程式碼如下：

.main
{ ：360 像素；
寬度：290px；
邊框：1px實心#444444;
字體大小：12px;
顏色：#444444;
邊距：20px; 🎜>.main_top
{
高度：30px;
寬度：290px;
行高：30px;
文字對齊：左；
背景顏色：#999999；邊框底部：1px實心#444444;
}
.main_top ul
{
padding:0px;
邊距：0px;
列表樣式：無；
邊距：0px;
列表樣式：無；
位置
位置； ：絕對;
}
.main_top ul li.h_qian
{
float:left;
寬度：80px;
文字對齊：居中；
背景顏色：#99999999999999； ;
高度：30px;
}
.main_top ul li.h_hou
{
float:left;
寬度：80px;
文字對齊：居中>；背景顏色：#ffffff;
遊​​標：指標；
頂邊距：1px;
高度：30px;
字型粗細：粗體；
}
.main_content
{
邊距：10px;
}


【js:

複製程式碼 複製程式碼

> 程式碼如下：


function tabchange(obj,p,c,q,h) {
$(obj).parent().find("li").attr("class ", "" q "");
$(obj).parents("." p "").find("." c "").hide();
$(obj).attr ("class", "" h "");
var j = $(obj).index();

$(obj).parents("." p "").find("." c ":eq(" j ")").show();
}

html: 複製程式碼

複製程式碼


代碼如下：

;

• 第一個模組


• 第二模組


• 第三模組

第1 區塊

第2 塊

;

第3 塊

;

程式碼很簡單，不多說了，詳細使用方法請參考Demo中tangtab. js裡的註解。 附：線上示範：http ://demo.jb51.net/js/2012/TabDemo/資源下載：TabDemo_jb51.rar資源下載：TabDemo_jb51.rar資源下載：TabDemo_jb51.rar資源下載：TabDemo_jb51.rar資源下載：TabDemo_jb51.rar資源下載>