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

頭都大了，選項(xiàng)卡點(diǎn)擊不能切換。。。求大神解答。。。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換
????window.onload=function(){
????????var?tit?=?document.getElementById("title");
????????var?tits?=?tit.getElementsByTagName("li");//獲取三個(gè)li
????????var?body?=?document.getElementById("body");
????????var?bodys?=?body.getElementsByTagName("div");//獲取3個(gè)div
?????????
????????for(int?i=0;i<tits.length;i++){
????????????tits[i].index=i;//標(biāo)記index
?????????????
????????????tits[i].onclick=function(){
?????????????
????????????????for(var?j=0;j<tits.length;j++){
????????????????????tits[j].className?=?"";//清除所有l(wèi)i的classname
????????????????????bodys[j].className?=?"hide";//使所有div的classname為hide
????????????????}
????????????????this.className?=?"show";//使點(diǎn)擊的li的classname為show
????????????????bodys[this.index].className?=?"show";//使點(diǎn)擊的li的對應(yīng)的div的classname為show
????????????}???
????????}
????}
????</script>
??
</head>
<body>
<!--?HTML頁面布局?-->
<div>
????<ul?id="title">
????????<li>房產(chǎn)</li><li>家居</li><li>二手房</li>
????</ul>
????<div?id="body">
????????<div>
????????????<a?href="javascript:;">275萬購昌平鄰鐵三居?總價(jià)20萬買一居</a>
????????????<a?href="javascript:;">200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)</a>
????????????<a?href="javascript:;">北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平</a>
????????????<a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現(xiàn)房</a>
????????</div>
????????<div>
????????????<a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a>
????????????<a?href="javascript:;">經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生</a>
????????????<a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a>
????????????<a?href="javascript:;">瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</a>
????????</div>
????????<div>
????????????<a?href="javascript:;">通州豪華3居260萬?二環(huán)稀缺2居250w甩</a>
????????????<a?href="javascript:;">西3環(huán)通透2居290萬?130萬2居限量搶購</a>
????????????<a?href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!</a>
????????????<a?href="javascript:;">獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬</a>
????????</div>
????</div>
</div>
?
??
</body>
</html>