基於jquery的9行js輕鬆實作tab控制項範例_jquery

複製代碼代碼如下：

/**
* 考慮到tab和pane有可能被動態的添加和刪除，
* 所以每次都廢點時間去查找先前被激活的tab
*/
var tab = function(tabId,activeId){
$("#" tabId).delegate ("li:not(#" activeId ")","點選",function(){
$("#" $("#" activeId).attr("tar")).css("display" ,"none");
$("#" activeId).removeAttr("id");

$(this).attr("id",activeId);
$(" #" $(this).attr("tar")) .css("顯示","塊");
}；
腳本>
頭>

li{
邊框：1px 實心#b5e2f3;
邊框底部：0px；
浮動：左；
寬度：100px;
高度：25pxx； ：0 7px;
背景：#F1FEF3;
填充：9px 0 0 0;
文字對齊：居中；
顏色：#33a3dc;
遊標：指針；
顏色：#33a3dc;
遊標：指針；
}
ul{
寬度：800;
高度：36px;
邊框底部：1px實心#b5e2f3;
}
#selected{
背景： #FFF！ 🎜>邊框底部：2px實心#FFF！ both;
高度：300px;
背景：#FFFFFF;
寬度：800px;
高度：100pxx;
內邊距：25px;
邊框：1px 實心#b5e2f3；
}
風格>

;

• 1


• 2


• 3


• 4

;

1

2

3

4

div>
身體>

tab("選項卡","所選");
腳本>