                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

請問為什么切換不成功

我在做選項卡切換的練習。
可是鼠標經(jīng)過選項的時候，所有的內(nèi)容都隱藏了，并且選項的格式?jīng)]有變化。
可以幫我看一下是哪里的問題嗎？
還有index在這里的作用是什么，切換不成功與它有關(guān)系嗎？
<!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>