基于jquery的9行js轻松实现tab控件示例
(编辑：jimmy 日期: 2025/5/13 浏览：3 次 )
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js"><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 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>
</div>
<div>
<div id="cate1" style="display:block;">
1
</div>
<div id="cate2" style="display:none;">
2
</div>
<div id="cate3" style="display:none;">
3
</div>
<div id="cate4" style="display:none;">
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js"><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 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>
</div>
<div>
<div id="cate1" style="display:block;">
1
</div>
<div id="cate2" style="display:none;">
2
</div>
<div id="cate3" style="display:none;">
3
</div>
<div id="cate4" style="display:none;">
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>
下一篇：JavaScript对象学习经验整理