实现多标签页效果

来源：互联网发布：电气工程算量软件编辑：程序博客网时间：2024/05/19 19:32

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实现多标签页效果</title>
<style>
* {
margin: 0;
padding: 0;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height:40px;
cursor: pointer;
text-align: center;
}
#container {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1,#content1{
background-color: #ffcc00;
}
#tab2,#content2{
background-color: #ff00cc;
}
#tab3,#content3{
background-color: #00ccff;
}
</style>
</head>
<body>
<h2>实现多标签页效果</h2>
<ul id="tab">
<li id="tab1">第一页</li>
<li id="tab2">第二页</li>
<li id="tab3">第三页</li>
</ul>
<div id="container">
<div id="content1">
第一页：<br/>   内容自定...
</div>
<div id="content2">
第二页：<br /> 内容自定...
</div>
<div id="content3">
第三页：<br /> 内容自定...
</div>
</div>
<script>
document.getElementById("content1").style.zIndex = "1";
var lis = document.querySelectorAll("ul#tab li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = show;
}
function show() {
var divs = document.querySelectorAll("#container div");
for (var r = 0; r < divs.length; r++) {
divs[r].style.zIndex = "";
}
var id = this.id.replace("tab", "content");
document.getElementById(id).style.zIndex = "1";
}
</script>
</body>
</html>

阅读全文

0 0