基于jquery的9行js轻松实现tab控件示例_jquery

<头>

<脚本类型=“text/javascript”src=“../js/jquery-1.7.2.min.js”>

/**
* 考虑到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；
高度：25px；
边距：0 7px；
背景：#F1FEF3;
填充：9px 0 0 0;
文本对齐：居中；
颜色：#33a3dc；
光标：指针；
}
ul{
宽度：800;
高度：36px；
边框底部：1px实心#b5e2f3；
}
#selected{
背景：#FFF！重要；
边框底部：2px实心#FFF！重要；
}
ul{margin:-1px;}
#cate1,#cate2, #cate3, #cate4, #cate5{
clear:both;
高度：300px；
背景：#FFFFFF;
宽度：800px；
高度：100px；
内边距：25px；
边框：1px实心#b5e2f3；
}

<身体>



<脚本>
tab("选项卡","所选");