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

點擊標(biāo)題邊框顏色不改變，哪里出錯了？

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實踐題 - 選項卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */?
??? *{
????????? padding:0px;
????????? margin: 0px;
????????? font:14px normal "microsoft yahei";
????????? }
??? #tabs{
??????????? width:270px;
??????????? height:200px;
??????????? padding:5px;x
??????????? margin:20px;
??????? }
??? #tabs ul{
??????? list-style:none;
??????? display:block;
??????? height:30px;
??????? line-height:30px;
??????? border-bottom:2px solid saddlebrown;

??? }
??? #tabs ul li{
??????? float:left;
??????? cursor:pointer;
??????? list-style:none;
??????? background:#fff;
??????? width:60px;
??????? height:28px;
??????? line-height:28px;
??????? text-align:center;
??????? margin:0px 5px;
??????? border:1px solid #aaaaaa;
??????? border-bottom:none;
??????? display:inline-block;
???????
??? }
??? #table ul li.on{
??????? border-top:2px solid saddlebrown;
??????? border-bottom:2px solid #fff;
??? }
??? #tabs div{
??????? border:1px solid #369;
??????? height:120px;
??????? line-height:25px;
??????? border-top:none;
??????? padding:5px;
??? }
??? .hide{
??????? display:none;
??? }
??? </style>
??? <script type="text/javascript">
????????
??? // JS實現(xiàn)選項卡切換
??? window.onload=function(){
??????? var tbody=document.getElementById("tabs");
??????? var uls=tbody.getElementsByTagName("ul")[0];???
??????? var lis=uls.getElementsByTagName("li");
??????? var divs=tbody.getElementsByTagName("div");
???????
??????? for(var i=0,lisnum=lis.length;i<lisnum;i++){
??????????? lis[i].index=i;
??????????? lis[i].onclick=function(){
??????????????? for(var n=0;n<lisnum;n++){
??????????????????? lis[n].className="";
??????????????????? divs[n].className="hide";
??????????????? }
??????????????? this.className="on";
??????????????? divs[this.index].className="";
??????????? }
??????? }
??????? }
??? </script>
?
</head>
<body>

<div id="tabs">
??? <ul>
??????? <li>房產(chǎn)</li>
??????? <li>家居</li>
??????? <li>二手房</li>
??? </ul>
??? <div>
??? 275萬購昌平鄰鐵三居總價20萬買一居<br/>
??? 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br/>
??? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br/>
??? 京樓盤直降5000 中信府公園樓王現(xiàn)房<br/>
??? </div>
??? <div>
???? 40平出租屋大改造美少女的混搭小窩<br/>
???? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br/>
???? 新中式的酷色溫情 66平撞色活潑家居<br/>
???? 瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計<br/>
??? </div>
??? <div>
???? 通州豪華3居260萬二環(huán)稀缺2居250w甩<br/>
???? 西3環(huán)通透2居290萬 130萬2居限量搶購<br/>
???? 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br/>
???? 獨家別墅280萬蘇州橋2居優(yōu)惠價248萬<br/>
??? </div>
???
</div>
</body>
</html>