基于jquery的9行js轻松实现tab控件示例
基于jquery的9行js轻松实现tab控件示例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/***考虑到tab和pane有可能被动态的添加和删除,*所以每次都废点时间去查找先前被激活的tab*/vartab=fu...

复制代码 代码如下:

<!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">

1

</div>

<div id="cate2">

2

</div>

<div id="cate3">

3

</div>

<div id="cate4">

4

</div>

</div>

</body>

<script>

tab("tab","selected");

</script>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类