Code area
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
padding:0px;
margin:0px;
}
.box{
width:600px;
height:500px;
background-color:green;
margin:100px;
}
ul{
width:600px;
height:50px;
background-color:pink;
list-style:none;
cursor: pointer;
}
ul > li{
width:120px;
height:50px;
font-size:30px;
color:white;
float:left;
text-align:center;
}
.current {
background-color:blue;
}
span{
width:100%;
height:450px;
font-size:80px;
color:white;
display:none;
text-align:center;
margin-top:25%;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
<li>袜子</li>
</ul>
<span style="display:block" class="text">鞋子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
<span>袜子</span>
</div>
</body>
<script>
//第一步绑定事件
window.onload=function(){
var list=document.getElementsByTagName("li");
var Dtext=document.getElementsByTagName("span");
//给每一个li添加移入事件
for(var i=0;i<list.length;i++){
list[i].index=i;
list[i].onmouseover=function(){
for(var i=0;i<list.length;i++){
list[i].className="";
Dtext[i].style.display="none";
}
//给每一个li添加current的颜色
this.className="current";
Dtext[this.index].style.display="block";
}
}
}
</script>
<script type="text/javascript" src="js/millet.js"></script>
</html>
