会做的大神,帮忙找下错,谢谢

来源:10-1 编程挑战

山巅对弈

2017-04-10 16:42

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */ 

     /*格式化样式*/

    body,ol,table,tr,td,dt,dd,dl,h1,h2,h3,h4,h5,h6,form,input,select,textarea{margin:0;padding:0; font-family:"微软雅黑"; font-size:14px; color:#444; font-weight:normal;}

ul,li{margin:0;padding:0; font-family:"微软雅黑";font-weight:normal;} 

    ul li{list-style-type: none;}

     /*代码样式*/

    #tab{width: 500px; height: 260px; background-color: #f7f7f7; border: 1px solid #eee; margin: 100px auto;}

    #tab ul{    height: 36px; width: 100%; clear: both; border-bottom: 1px solid #eee;}

    #tab ul li{float: left; width: 90px; text-align: center; line-height: 36px; color: #444444; border-right: 1px solid #EEEEEE; text-decoration: none;}

    #tab ul li:hover{color:red}

    .on{color: red !important;}

    

    #box{width: 460px; margin: auto; line-height: 28px;}

    .hide{display: none;}

    

    </style>

    <script type="text/javascript">

    window.onload = function(){

       var bhx=document.getElementById("tab");

       var bhy=bhx.getElementsByTagName("ul")[0];

       var bhz=bhy.getElementsByTagName("li");

       var bgdiv=bhx.getElementsByTagName("div");

       

       var len=bhz.length

       for(var i=0; i<len;i++){

        bhz[i].index=i;

        bhz[i].onclick = function(){

        for(var n=0; n<len; n++){

        bhz[n].className = "";

                bgdiv[n].className = "hide";

        }

        this.className = "on";

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

        }

       };

    } 

    </script>

</head>

<body>

<!-- HTML页面布局 -->

<div id="tab">

<ul>

<li>房产</li>

<li>家居</li>

<li>二手房</li>

</ul>

<div id="box">

<div style="display: block;">

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

   200万内购五环三居 140万安家东三环

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

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

</div>

<div>

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

    经典清新简欧爱家 90平老房焕发新生

    新中式的酷色温 66平撞色活泼家居

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

</div>

<div>

<p>

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

    西3环通透2居290万 130万2居限量抢购

    黄城根小学学区仅260万 121平70万抛!

    独家别墅280万 苏州桥2居优惠价248万

</p>

</div>

</div>

</div>

</body>

</html>


写回答 关注

1回答

  • 山巅对弈
    2017-04-10 17:07:18

    找到了

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468782 学习 · 22507 问题

查看课程

相似问题