<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
500px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul {
list-style: none;
600px;
margin-left: -1px;
overflow: hidden;
}
li {
100px;
height: 30px;
float: left;
border-left: 1px solid #000;
background-color: purple;
cursor: pointer;
text-align: center;
line-height: 30px;
}
span {
display: block;
500px;
height: 370px;
font: 700 100px/370px "simsun";
text-align: center;
background-color: pink;
}
.current {
background-color: yellow;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>裤子</li>
<li>帽子</li>
<li>鞋子</li>
<li>袜子</li>
<li>领子</li>
</ul>
<span>裤子</span>
<span>帽子</span>
<span>鞋子</span>
<span>袜子</span>
<span>领子</span>
</div>
<script>
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
// liArr[i].index = i;
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
for(var j=0;j<liArr.length;j++){
// liArr[j].className = "";
// spanArr[j].className = "hide";
liArr[j].setAttribute("class","");
spanArr[j].setAttribute("class","hide");
}
// this.className = "current";
// spanArr[this.index].className = "show";
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
</script>
</body>
</html>