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

為什么無(wú)法實(shí)現(xiàn)三個(gè)欄目的切換

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
?????*{margin:0;?padding:0;?font:normal?16px?"微軟雅黑";color:#000000;}?
?????
?????ul{list-style-type:?none;}
?????a{text-decoration:?none;}
?????
?????#tab{width:?300px;height:190px;margin:?20px?auto;list-style-type:?none;}
?????
?????#main{border-bottom:2px?solid?#8B4513;height:?32px;}
?????#main?li{display:inline-block;line-height:30px;width:60px;text-align:center;border:2px?solid?#999;border-bottom:none;margin-left:5px;}
?????#main?li.hover{cousor:pointer}
?????#main?li.action{border-top:2px?solid?#8B4513;border-bottom:2px?solid?#FFFFFF;}
?????
?????#tab?div{border:?2px?solid?#7396B8;border-top:?none;}
?????#tab?div?li{height:?30px;line-height:?30px;text-indent:?2px;}
?????
?????.show{display:?block;}
?????.hide{display:?none;}
?????
????</style>
????<script?type="text/javascript">
????/*?實(shí)現(xiàn)切換效果?*/???
????window.onload?=?function(){
????????var?tab?=?document.getElementById("tab");
????????var?main?=?document.getElementById("main");
????????var?mainli?=?main.getElementsByTagName("li");
????????var?div?=?tab.getElementsByTagName("div");
????????for(var?i=0;i<mainli.length;i++){
????????????mainli[i].index?=?i;
????????????mainli[i].onmouseover?=?function(){
????????????????for(var?j=0;j<mainli.length;j++){
????????????????????mainli[i].className?=?"";
????????????????}
????????????????this.className?=?"action";
????????????????
????????????????for(var?j=0;j<div.length;j++){
????????????????????div[j].className?=?"hide";
????????????????}
????????????????div[this.index].className?=?"show";
????????????}
????????}
????????
????}

????</script>
?
</head>
<body>
<!--?HTML頁(yè)面布局?-->
<div?id="tab">
????<ul??id?=?"main">
????????<li>房產(chǎn)</li><li>家居</li><li>二手房</li>
????</ul>
????<div>
????????<ul?>
????????????<li><a?href="javascript:;">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
????????????<li><a?href="javascript:;">200萬(wàn)內(nèi)購(gòu)五環(huán)三居?1400萬(wàn)安家京一環(huán)</a></li>
????????????<li><a?href="javascript:;">北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東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)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生</a></li>
????????????<li><a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a></li>
????????????<li><a?href="javascript:;">瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</a></li>
????????</ul>
????</div>????
????<div>
????????<ul>
????????????<li><a?href="javascript:;">通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩</a></li>
????????????<li><a?href="javascript:;">西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)</a></li>
????????????<li><a?href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋!</a></li>
????????????<li><a?href="javascript:;">獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a></li>
????????</ul>
????</div>
</div>

?
</body>
</html>