Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 基于jquery的9行js轻松实现tab控件示例

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

发布时间:2014-04-24   编辑:www.jquerycn.cn
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 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>

您可能感兴趣的文章:
基于jquery的9行js轻松实现tab控件示例
为开发者准备的10款最好的jQuery日历插件
使用jquery实现div的tab切换实例代码
2013年优秀jQuery插件整理小结
探讨JQUERY JSON的反序列化类 using问题的解决方法
jquery将一个表单序列化为一个对象的方法
jquery ajax中使用jsonp的限制解决方法
jquery ajax跨域解决方法(json方式)
jQuery中使用Ajax获取JSON格式数据示例代码
不要使用jQuery触发原生事件的方法

关键词: jquery  tab控件   
[关闭]