<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
.the{
303px;
height: 32px;
border-right: 1px red solid;
}
.the li{
100px;
height: 30px;
border: 1px red solid;
border-right: none;
float: left;
line-height: 30px;
text-align: center;
}
.tab li{
302px;
height: 300px;
border: 1px red solid;
line-height: 300px;
text-align: center;
border-top: none;
}
.tab{
302px;
height: 300px;
}
.one{
303px;
height: 404px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one">
<ul class="the">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul class="tab">
<li bgcolor="red">a</li>
<li style="display:none" bgcolor="green">b</li>
<li style="display:none" bgcolor="pink">c</li>
</ul>
</div>
<script type="text/javascript">
var eItemList=document.querySelectorAll(".the li"),
eContentList=document.querySelectorAll(".tab li");
for(var i=0;i<eItemList.length;i++){
eItemList[i].index=i;
eItemList[i].style.background="greem";
eItemList[i].onmouseover=function(){
//console.log(this.index);
for(var i=0;i<eContentList.length;i++){
//eContentList[i].style.background="red";
eContentList[i].style.display="none";
eItemList[i].style.background="none";
eContentList[i].style.background="none";
}
eContentList[this.index].style.display="block";
eItemList[this.index].style.background="green";
eContentList[1].style.background="pink";
eContentList[0].style.background="green";
eContentList[2].style.background="red";
}
//mouseout
};
</script>
<script type="text/javascript" src="wen.js"></script>
</body>
</html>