                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Tab選項(xiàng)卡切換效果

為什么不能直接寫，要再寫一個(gè)for循環(huán)

<!doctype?html>
<html>
<head>
??<meta?charset="UTF-8">
??<title>Document</title>
??<style?type="text/css">
????body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin:?0;?padding:?0;}
????body{font:14px/1.5?"宋體";}
????img{border:none;}
????ul,ol{list-style:none;}
????input,select,textarea{outline:none;border:none;background:none;}
????textarea{resize:none;}
????a{text-decoration:none;}


????.Box{
??????width:?298px;
??????height:?98px;
??????margin:?100px;
??????border:?1px?solid?#eee;
??????overflow:?hidden;
????}
????.con1{
??????height:?27px;
??????line-height:?27px;
??????position:?relative;
??????background-color:?#f7f7f7;
????}
????.uls{
??????width:?301px;
??????position:?absolute;
??????left:?-1px;
????}
????.uls?li{
??????float:?left;
??????width:?58px;
??????padding:?0?1px;
??????text-align:?center;
??????border-bottom:?1px?solid?#eee;
????}
????/*.uls?li:hover{
??????padding:?0;
??????border-left:?1px?solid?#eee;
??????border-right:?1px?solid?#eee;
??????background-color:?#fff;
??????border-bottom:?0;
????}*/
????.uls?.on{
??????padding:?0;
??????border-left:?1px?solid?#eee;
??????border-right:?1px?solid?#eee;
??????background-color:?#fff;
??????border-bottom:?1px?solid?#fff;
????}
????.wen{
??????margin:?10px;
????}
????.tz{
??????overflow:?hidden;
????}
????.tz?ul?li{
??????float:?left;
??????width:?134px;
??????text-align:?center;
????}
????.nos{
??????display:?none;
????}
??</style>
??<script?type="text/javascript">
????window.onload?=?function?()?{
??????var?lis?=?document.getElementById('con1').getElementsByTagName('li');
??????var?divs?=?document.getElementById('wen').getElementsByTagName('div');
??????for?(var?i?=?0;?i?<?lis.length;?i++)?{
????????lis[i].i?=?i;
????????lis[i].onmouseover?=?function?()?{
??????????for?(var?j?=?0;?j?<?divs.length;?j++)?{
????????????lis[j].className?=?"";
????????????divs[j].style.display?=?"none";
??????????}
??????????this.className?=?"on";
??????????divs[this.i].style.display?=?"block";
????????}
????????//?lis[i].onmouseout?=?function?()?{
????????//???this.className?=?"";
????????//?}
??????}
????}
??</script>
</head>
<body>

??<div?class="Box">
????<div?id=?"con1"?class="con1">
??????<ul?class="uls">
????????<li><a?href="#">學(xué)習(xí)</a></li>
????????<li><a?href="#">熟悉</a></li>
????????<li><a?href="#">嘻嘻</a></li>
????????<li><a?href="#">學(xué)習(xí)</a></li>
????????<li?class="on"><a?href="#">熟悉</a></li>
??????</ul>
????</div>
????<div?id="wen"?class="wen">
??????<div?class="tz?nos">
????????<ul>
??????????<li>aaaaaaaaaaaa</li>
??????????<li>bbbbbbbbbbbb</li>
??????????<li>cccccccccccc</li>
??????????<li>dddddddddddd</li>
????????</ul>
??????</div>
??????<div?class="tz?nos">
????????<ul>
??????????<li>eeeeeeeeeeee</li>
??????????<li>ffffffffffff</li>
??????????<li>gggggggggggg</li>
??????????<li>hhhhhhhhhhhh</li>
????????</ul>
??????</div>
??????<div?class="tz?nos">
????????<ul>
??????????<li>iiiiiiiiiiii</li>
??????????<li>jjjjjjjjjjjj</li>
??????????<li>kkkkkkkkkkkk</li>
??????????<li>llllllllllll</li>
????????</ul>
??????</div>
??????<div?class="tz?nos">
????????<ul>
??????????<li>mmmmmmmmmmmm</li>
??????????<li>nnnnnnnnnnnn</li>
??????????<li>oooooooooooo</li>
??????????<li>pppppppppppp</li>
????????</ul>
??????</div>
??????<div?class="tz">
????????<ul>
??????????<li>rrrrrrrrrrrr</li>
??????????<li>ssssssssssss</li>
??????????<li>tttttttttttt</li>
??????????<li>uuuuuuuuuuuu</li>
????????</ul>
??????</div>
????</div>
??</div>
??
</body>
</html>

為什么不能直接lis[i].className = "";，要再寫一個(gè)for循環(huán)lis[j].className = "";才行？