基于jquery的9行js輕松實現tab控件示例

2024-05-06 15:52:59

字體：大中小

來源：轉載

供稿：網友

tab控件的實現方法有很多，在本文為大家詳細介紹下如何通過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>
<div>
<ul>
<li tar="cate1">1</li>
<li tar="cate2">2</li>
<li tar="cate3">3</li>
<li tar="cate4">4</li>
</ul>
</div>
<div>
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>