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

為什么代碼照搬也出錯？

當鼠標移到div的時候，整個div都消失

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
????????/*?CSS樣式制作?*/
????????*{
????????????margin:0;
????????????padding:0;
????????????font:normal?12px?"微軟雅黑";?color:#000;
????????}
????????ul{
????????????list-style-type:none;
????????}
????????a{
????????????text-decoration:none;
????????}
????????#tab-list{
????????????width:275px;
????????????height:190px;
????????????margin:20px?auto;
????????}
????????#ul1{
????????????border-bottom:2px?solid?#8b4513;
????????????height:32px;
????????}
????????#ul1?li{
????????????display:inline-block;
????????????width:60px;
????????????line-height:30px;
????????????text-align:center;
????????????border:1px?solid?#999;
????????????border-bottom:none;
????????????margin-left:5px;
????????}
????????#ul1?li:hover{
????????????cursor:pointer;
????????}
????????#ul1?li.active{
????????????border-top:2px?solid?#8b4513;
????????????border-bottom:2px?solid?#fff;
????????}
????????#tab-list?div{
????????????border:1px?solid?#7396b8;
????????????border-top:none;
????????}
????????#tab-list?div?li{
????????????height:30px;
????????????line-height:30px;
????????????text-indent:8px;
????????}
????????.show{
????????????display:block;
????????}
????????.hide{
????????????display:none;
????????}
????</style>
????<script?type="text/javascript">
????????//?JS實現(xiàn)選項卡切換
????????window.onload?=?function(){
????????????var?oUl1?=?document.getElementById("ul1");
????????????var?aLi?=?document.getElementsByTagName("li");
????????????var?oDiv?=?document.getElementById("tab-list");
????????????var?aDiv?=?document.getElementsByTagName("div");
????????????for?(var?i=0;?i<aLi.length;?i++){
????????????????aLi[i].index?=?i;
????????????????aLi[i].onmouseover?=?function(){
????????????????????for?(var?i=0;?i<aLi.length;?i++){
????????????????????????aLi[i].className?=?"";
????????????????????}
????????????????????this.className?=?"active";
????????????????????for?(var?j=0;?j<aDiv.length;?j++){
????????????????????????aDiv[j].className?=?"hide";
????????????????????}
????????????????????aDiv[this.index].className?=?"show";
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tab-list">
????<ul?id="ul1">
????????<li>房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li><a?href="javascript:;">275萬購昌平鄰鐵三居?總價20萬買一居</a></li>
????????????<li><a?href="javascript:;">200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)</a></li>
????????????<li><a?href="javascript:;">北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平</a></li>
????????????<li><a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現(xiàn)房</a></li>
????????</ul>
????</div>
????<div>
????????<ul>
????????????<li><a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a></li>
????????????<li><a?href="javascript:;">經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生</a></li>
????????????<li><a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a></li>
????????????<li><a?href="javascript:;">瓷磚就像選好老婆?衛(wèi)生間煙道的設計</a></li>
????????</ul>
????</div>
????<div>
????????<ul>
????????????<li><a?href="javascript:;">通州豪華3居260萬?二環(huán)稀缺2居250w甩</a></li>
????????????<li><a?href="javascript:;">西3環(huán)通透2居290萬?130萬2居限量搶購</a></li>
????????????<li><a?href="javascript:;">黃城根小學學區(qū)僅260萬?121平70萬拋!</a></li>
????????????<li><a?href="javascript:;">獨家別墅280萬?蘇州橋2居優(yōu)惠價248萬</a></li>
????????</ul>
????</div>
</div>
</body>
</html>