基于jquery的9行js轻松实现tab控件示例
基于jquery的9行js轻松实现tab控件示例代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/**
* 考虑到tab和pane有可能被动态的添加和删除，
* 所以每次都废点时间去查找先前被激活的tab
*/
var tab = function(tabid,activeid){
$("#"+tabid).delegate("li:not(#"+activeid+")","click",function(){
$("#"+$("#"+activeid).attr("tar")).css("display","none");
$("#"+activeid).removeattr("id");
$(this).attr("id",activeid);
$("#"+$(this).attr("tar")).css("display","block");
});
};
</script>
</head>
<style>
li{
border:1px solid #b5e2f3;
border-bottom:0px;
float:left;
width:100px;
height:25px;
margin:0 7px;
background:#f1fef3;
padding:9px 0 0 0;
text-align:center;
color:#33a3dc;
cursor:pointer;
}
ul{
width:800;
height:36px;
border-bottom:1px solid #b5e2f3;
}
#selected{
background:#fff!important;
border-bottom:2px solid #fff!important;
}
ul{margin:-1px;}
#cate1,#cate2, #cate3, #cate4, #cate5{
clear:both;
height:300px;
background:#ffffff;
width:800px;
height:100px;
padding:25px;
border:1px solid #b5e2f3;
}
</style>
<body>
<p id="tab">
<ul>
<li tar="cate1" id="selected">1</li>
<li tar="cate2">2</li>
<li tar="cate3">3</li>
<li tar="cate4">4</li>
</ul>
</p>
<p>
<p id="cate1" style="display:block;">
1
</p>
<p id="cate2" style="display:none;">
2
</p>
<p id="cate3" style="display:none;">
3
</p>
<p id="cate4" style="display:none;">
4
</p>
</p>
</body>
<script>
tab("tab","selected");
</script>
</html>
下一篇： 创建ASM实例及ASM数据库（转载）