一般把script放在body的最下方就可以获取到body里的元素了，可是我做的这个选项卡效果把script放在body的最下面了，可是去掉window.onload之后，效果就出不来了，这是怎么回事<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
list-style-type: none;
}
#container{
width:400px;
height:250px;
position: relative;
}
#top li{
width:100px;
height:50px;
float: left;
}
#bottom li{
width:400px;
height:200px;
position: absolute;
left:0;
top:50px;
display: none;
}
.first{
background: red;
}
.second{
background: blue;
}
.third{
background: purple;
}
.four{
background: pink;
}
#bottom li.first{
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul id="top">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="bottom">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
window.onload= function () {
var top = document.getElementById("top"),
top_li = top.getElementsByTagName("li"),
bottom = document.getElementById("bottom"),
bottom_li = bottom.getElementsByTagName("li");
for (var i = 0; i<top_li.length;i++){
top_li[i].index = i;
top_li[i].onclick = function(){
for (var j = 0;j<bottom_li.length;j++){
bottom_li[j].style.display = "none";
}
bottom_li[this.index].style.display = "block";
};
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消