问答详情
源自:10-1 编程挑战

终于完成啦

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0 5px;

        }

        ul{

            list-style:none;

            margin-top:5px;

            width:302px;

            height:30px;

            line-height:30px;

            border-bottom:2px solid darkred;

        }

        li{

            float:left;

            cursor:pointer;

            margin:0px 3px;

            line-height:28px;

            border:1px solid #aaa;

            border-bottom:none;

            display:block;

            width:60px;

            text-align:center;

        }

        div{

            width:290px;

            height:125px;

            line-height:30px;

            border:1px solid #336699;

            border-top:none;

            padding:3px 5px;

        }

        .on{

            border-top:2px solid darkred;

            border-bottom:2px solid #fff;

        }

        .off{

            display:none;

        }

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var aa = document.getElementsByTagName("li");

            var bb = document.getElementsByTagName("div");

            for(var i =0;i<aa.length;i++){

                aa[i].index=i;

                aa[i].onclick=function(){

                    for(var n=0;n<aa.length;n++){

                        aa[n].className="";

                        bb[n].className="off";

                    }

                    this.className="on";

                    bb[this.index].className="";                    

                }

            }

        }

    </script>

</head>


<body>

    <ul>

        <li class="on">房产</li>

        <li>家居</li>

        <li>二手房</li>

    </ul>

    <div>

        275万购昌平邻铁三居 总价20万买一居<br/>

        200万内购五环三居 140万安家东三环<br/>

        北京首现零首付楼盘 53万购东5环50平<br/>

        京楼盘直降5000 中信府 公园楼王现房<br/>

    </div>

    <div class="off">

        40平出租屋大改造 美少女的混搭小窝<br/>

        经典清新简欧爱家 90平老房焕发新生<br/>

        新中式的酷色温情 66平撞色活泼家居<br/>

        瓷砖就像选好老婆 卫生间烟道的设计<br/>

    </div>

    <div class="off">

        通州豪华3居260万 二环稀缺2居250w甩<br/>

        西3环通透2居290万 130万2居限量抢购<br/>

        黄城根小学学区仅260万 121平70万抛!<br/>

        独家别墅280万 苏州桥2居优惠价248万<br/>

    </div>

</body>


</html>


提问者:__Quincy 2020-08-15 15:06

个回答

  • qq_慕函数2160876
    2020-09-13 21:25:27

    index是什么意思?