                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么無法我的代碼無法實現？

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實踐題 - 選項卡</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>房產</li><li>家居</li><li>二手房</li>
??? </ul>
??? <div>
??????? <ul>
??????????? <li><a href="javascript:;">275萬購昌平鄰鐵三居總價20萬買一居</a></li>
??????????? <li><a href="javascript:;">200萬內購五環三居 140萬安家東三環</a></li>
??????????? <li><a href="javascript:;">北京首現零首付樓盤 53萬購東5環50平</a></li>
??????????? <li><a href="javascript:;">京樓盤直降5000 中信府公園樓王現房</a></li>
??????? </ul>
??? </div>?? ?
??? <div>
??????? <ul>
??????????? <li><a href="javascript:;">40平出租屋大改造美少女的混搭小窩</a></li>
??????????? <li><a href="javascript:;">經典清新簡歐愛家 90平老房煥發新生</a></li>
??????????? <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li>
??????????? <li><a href="javascript:;">瓷磚就像選好老婆衛生間煙道的設計</a></li>
??????? </ul>
??? </div>?? ?
??? <div>
??????? <ul>
??????????? <li><a href="javascript:;">通州豪華3居260萬二環稀缺2居250w甩</a></li>
??????????? <li><a href="javascript:;">西3環通透2居290萬 130萬2居限量搶購</a></li>
??????????? <li><a href="javascript:;">黃城根小學學區僅260萬 121平70萬拋!</a></li>
??????????? <li><a href="javascript:;">獨家別墅280萬蘇州橋2居優惠價248萬</a></li>
??????? </ul>
??? </div>
</div>

?
</body>
</html>