//-----------------使用了index索引量来完成匹配区域的显示，使用Array数组灵活控制各单元颜色
<html>
<head>
<title>subMeau</title>
</head>
<style type="text/css">
li{float: left; 100px;text-align: center;list-style-type: none;}
.clear{clear: both;}
#subnav div{ 300px;height: 100px;display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
oLi=document.getElementsByTagName('li');
oDiv=document.getElementsByTagName('div');
var color=new Array('gray','green','pink');
for(var i=0;i<3;i++){
oLi[i].index=i;
oLi[i].style.background=color[i];
oLi[i].onmouseover=function(){
for(i=0;i<3;i++){
oDiv[i+1].style.display='none';
oDiv[this.index+1].style.display='block';
oDiv[this.index+1].style.background=color[this.index];
}
}
}
}
</script>
<body>
<ul>
<li>Andriod</li>
<li>IOS</li>
<li>WindowsPhone</li>
</ul>
<div class="clear"></div>
<ul id="subnav">
<li>
<div>This is the statement of the Andriod OS.</div>
</li>
<li>
<div>This is the statement of the IOS OS.</div>
</li>
<li>
<div>This is the statement of the WPhone OS.</div>
</li>
</ul>
</body>
</html>