我在做选项卡切换的练习。
可是鼠标经过选项的时候，所有的内容都隐藏了，并且选项的格式没有变化。
可以帮我看一下是哪里的问题吗？
还有index在这里的作用是什么，切换不成功与它有关系吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px}
#tab{width:300px; margin:auto;}
#tab ul{list-style-type:none;}
#tab a{text-decoration:none;}
.ul1 li{float:left; margin-left:30px;}
#tab .ul1{height:50px;}
.on{background:#cfc;}
.hide{display:none;}
</style>
<script>
window.onload=function(){
var tab=document.getElementById('tab');
var ul1=document.getElementsByTagName('ul')[0];
var lis=tab.getElementsByTagName('li');
var divs=tab.getElementsByTagName('div');
for(var i=0, len=lis.length; i<len; i++){
lis[i].index=i;
lis[i].onmouseover=function(){
for(var n=0; n<len; n++){
lis[n].className='';
divs[n].className='hide'}
this.className='on'
divs[this.index].className='';
}
}
}
</script>
</head>
<body>
<div id='tab'>
<ul class='ul1'><li class='on'>AAAAA</li><li>BBBBB</li><li>CCCCC</li></ul>
<div>
<ul>
<li><a href="javascript:">第一页</a></li>
<li><a href="javascript:">ASD</a></li>
<li><a href="javascript:">FGH</a></li>
</ul>
</div>
<div class='hide'>
<ul>
<li><a href="javascript:">第二页</a></li>
<li><a href="javascript:">ERT</a></li>
<li><a href="javascript:">BNM</a></li>
</ul>
</div>
<div class='hide'>
<ul>
<li><a href="javascript:">第三页</a></li>
<li><a href="javascript:">GBN</a></li>
<li><a href="javascript:">LKH</a></li>
</ul>
</div>
</div>
</body>
</html>
