头都大了，选项卡点击不能切换。。。求大神解答。。。

源自：10-1 编程挑战
头都大了，选项卡点击不能切换。。。求大神解答。。。

<!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>
提问者：hjh399 2015-10-17 09:37
头都大了，选项卡点击不能切换。。。求大神解答。。。

个回答
