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

為什么無(wú)法我的代碼無(wú)法實(shí)現(xiàn)？

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
???? *{
???????? padding:0;margin:0;color:#000;
???????? }
????? ul{list-style-type: none;}
???? a{text-decoration: none;}
???? #tab-list{
???????? height:400px;
???????? border:1px solid blue;
???????? width:400px;
???????? margin-top:30px;
??????? ?
???? }
???? #ul1{
????????? list-style:none; display:block; height:50px; line-height:50px;
????????? overflow:hidden;
?}
???? #ul1 li{
??????? display:inline-block; float:left;border:1px solid #8e8e8e;margin:0 auto;width:60px;height:30px;text-indent:10px;margin-left:20px;margin-top:10px; overflow:hidden;line-height:30px;
???? }
?
? #tab-list div{
????? height:200px;
????? width:300px;border-left:1px solid pink;
????? border-right:1px solid pink;
????? border-bottom:1px solid pink;
????? border-top:none;
????? line-height:40px;margin-left:18px;
????? margin-bottom:30px;margin-top:-10px;
? }
? .on{
????? display:block;
? }
? .hide{
????? display:none;
? }
?? #ul1 li:hover{color:blue;}
???? #ul1 li.active{border-top:-20px solid red;border-bottom:2px solid #FFFFFF;}

????? ?
??? </style>
??? <script type="text/javascript">
??????? ?
??? window.onload=function(){
??????? var Oul=document.getElementById("ul1");
???????? var Oli=Oul.getElementsByTagName("li");
????????? var list=document.getElementById("tab-list");
????????? var odiv=list.getElementsByTagName("div");
??? ?
?????? for(var i=0;i<Oli.length;i++){
??????? oLi[i].index=i;
??????? oLi[i].onclick=function(){
??????????? for(var j=0;j<Oli.length;j++){
?????????????? Oli[j].className="";
??????????????? odiv[j].className="hide";
??????????? }
??????????? this.className="on";
?????????? odiv[this.index].className="";
??????? }
??? }
}
??? </script>
?
</head>
<body>


<div id="tab-list">
??? <ul id="ul1">
??????? <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)三居 140萬(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>