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

頭都大了，選項卡點擊不能切換。。。求大神解答。。。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????*{margin:0;padding:0;font-size:14px}?
????.wrap{
????????margin:10px?auto;
????????width:330px;
????}
????#title{
????????height:32px;
????????border-bottom:2px?solid?#8b4513;
????}
?????
????li{
????????list-style:none;
????????display:inline-block;
????????float:left;
????????margin-left:5px;
????????width:60px;
????????border:1px?solid?#7396b8;
????????border-bottom:none;
????????text-align:center;
????????height:30px;
????????line-height:30px;???
????}
????li:hover{cursor:?pointer;}
????li.show{
????????border-top:2px?solid?#8b4513;
????????border-bottom:2px?solid?#FFFFFF;????????
????}
????#body{
????????border:1px?solid?#7396b8;
????????border-top:none;
????????height:120px;
?????????
????}
????a{
????????text-decoration:none;
????????line-height:23px;
????????display:block;
????????color:black;
????????text-indent:5px;
????}
????div.show{
????????display:block;
????}
????div.hide{
????????display:none;
????}
?????
????</style>
????<script?type="text/javascript">?????
????//?JS實現選項卡切換
????window.onload=function(){
????????var?tit?=?document.getElementById("title");
????????var?tits?=?tit.getElementsByTagName("li");//獲取三個li
????????var?body?=?document.getElementById("body");
????????var?bodys?=?body.getElementsByTagName("div");//獲取3個div
?????????
????????for(int?i=0;i<tits.length;i++){
????????????tits[i].index=i;//標記index
?????????????
????????????tits[i].onclick=function(){
?????????????
????????????????for(var?j=0;j<tits.length;j++){
????????????????????tits[j].className?=?"";//清除所有li的classname
????????????????????bodys[j].className?=?"hide";//使所有div的classname為hide
????????????????}
????????????????this.className?=?"show";//使點擊的li的classname為show
????????????????bodys[this.index].className?=?"show";//使點擊的li的對應的div的classname為show
????????????}???
????????}
????}
????</script>
??
</head>
<body>
<!--?HTML頁面布局?-->
<div>
????<ul?id="title">
????????<li>房產</li><li>家居</li><li>二手房</li>
????</ul>
????<div?id="body">
????????<div>
????????????<a?href="javascript:;">275萬購昌平鄰鐵三居?總價20萬買一居</a>
????????????<a?href="javascript:;">200萬內購五環三居?140萬安家東三環</a>
????????????<a?href="javascript:;">北京首現零首付樓盤?53萬購東5環50平</a>
????????????<a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現房</a>
????????</div>
????????<div>
????????????<a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a>
????????????<a?href="javascript:;">經典清新簡歐愛家?90平老房煥發新生</a>
????????????<a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a>
????????????<a?href="javascript:;">瓷磚就像選好老婆?衛生間煙道的設計</a>
????????</div>
????????<div>
????????????<a?href="javascript:;">通州豪華3居260萬?二環稀缺2居250w甩</a>
????????????<a?href="javascript:;">西3環通透2居290萬?130萬2居限量搶購</a>
????????????<a?href="javascript:;">黃城根小學學區僅260萬?121平70萬拋!</a>
????????????<a?href="javascript:;">獨家別墅280萬?蘇州橋2居優惠價248萬</a>
????????</div>
????</div>
</div>
?
??
</body>
</html>