一、tab页切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
ul li{
float: left;
width:80px;
height:40px;
list-style: none;
text-align: center;
line-height: 40px;
cursor: pointer;
}
#header{
overflow: hidden;
}
#box{
margin-left: 50px;
width: 400px;
height:600px;
}
#body{
width:400px;
height: 500px;
position:absolute;
}
#body div{
position:absolute;
width: 100%;
height: 100%;
}
#tab1,#content01{
background-color: red;
z-index: 1;
}
#tab2,#content02{
background-color: blue;
}
#tab3,#content03{
background-color: yellow;
}
</style>
<script src="../jquery/jquery.js"></script>
<script>
$(function(){
$("li").click(function(){
var index=$(this).index()+1
$("#content0"+index).attr("style","z-index:1").siblings().removeAttr("style");
})
})
</script>
</head>
<body>
<div id="box">
<div id="header">
<ul>
<li id="tab1">tab1</li>
<li id="tab2">tab2</li>
<li id="tab3">tab3</li>
</ul>
</div>
<div id="body">
<div id="content01">内容1</div>
<div id="content02">内容2</div>
<div id="content03">内容3</div>
</div>
</div>
</body>
</html>
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
