js实现tab标签

piperzero

浏览: 3554990 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

<html>
<head>
<title>tab标签</title>
</head>
<style type='text/css'>
*{ margin:0;
padding:0;
background-color:#ccc;
}
#main{
margin:30px auto;
width:400px;
height:300px;
border:2px solid ;
}
#nav{
width:400px;
height:20px;
}
#nav ul{
width:400px;
height:20px;
}
#nav ul li{
list-style:none;
display:inline;
width:80px;
height:18px;
line-height:18px;
margin-left:15px;
float:left;
}
#nav ul li a{
background-color:green;
border:2px solid #000;
color:red;
text-align:center;
text-decoration:none;
display:block;
}
#nav ul li a:hover{
background-color:#33cc55;
color:blue;
}
.cur{
z-index:100;
border-bottom:2px solid #yellow;
color:#00f;
}
#container{
background-color:#fff;
width:400px;
margin-top:15px;
text-align:center;
}
.sub-con{
height:220px;
display:none;
}
.cur-sub-con{
display:block;
}
</style>
</style>
<body>
<div id='main'>
<div id='nav'>
<ul>
<li><a href='#' class='cur'>tab1</a></li>
<li><a href='#'>tab2</a></li>
<li><a href='#'>tab3</a></li>
<li><a href='#'>tab4</a></li>
</ul>
</div>
<div id='container'>
<div class='sub-con cur-sub-con'>
aaaaaaaaaaaaaaa
</div>
<div class='sub-con'>
bbbbbbbbbbbbbbbb
</div>
<div class='sub-con'>
cccccccccccccccccc
</div>
<div class='sub-con'>
dddddddddddddddd
</div>
</div>
</body>
<script src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var intervallID;
var curLi;
$("#nav li a").mouseover(function(){
curLi=$(this);
intervallID=setInterval(onMouseOver,100);
});
function onMouseOver(){
$(".cur-sub-con").removeClass("cur-sub-con");
$(".sub-con").eq($("#nav li a").index(curLi)).addClass("cur-sub-con");
$(".cur").removeClass("cur");
curLi.addClass("cur");
}
$("#nav li a").mouseout(function(){
clearInterval(intervallID);
});
$("#nav li a").click(function(){
clearInterval(intervallID);
$(".cur-sub-con").removeClass("cur-sub-con");
$(".sub-con").eq($("#nav li a").index(curLi)).addClass("cur-sub-con");
$(".cur").removeClass("cur");
curLi.addClass("cur");
});
});
</script>
</html>

分享到：