课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

哪里有问题

来源：10-1 编程挑战

qq_我本非凡_1

2017-04-09 21:27

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

    *{

        padding:0;

        font-size:normal;

        font-family:"Microsoft Yaihei";

    }

    li{

        padding:5px 20px;

        border:1px solid black;

        list-style:none;

        display:inline;

        margin-left:10px;

    }

    div{

        border:1px solid blue;

        margin-left:4px;

    }

    #head{

       border:none; 

    }

    #ion{

        display;none;

    }

    ul li.on{

        border-bottom:white;

        border-top:blue;

        cursor:pointer;

    }

    

       

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

    window.onload=function(){

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

    var c=document.getElementById("head");

    var t=c.getElementsByTagName("div");

    for(var i=0,len=h.length;i<len;i++){

        h[i].index=i;

        h[i].onclick=function(){

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

                h[n].className="";

                t[n].className="ion";

            }

            this.className="on";

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

        }

        

    }

    }

 

    

    </script>

 

</head>

<body>

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

<div id="head">

<ul>

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

        <li>家居</li>

        <li>二手房</li>

</ul> 


<div>

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

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

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

    京楼盘直降5000 中信府 公园楼王现房

</div>

<div id="ion">

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

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

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

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

</div>

<div id="ion">

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

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

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

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

</div>

</div>




 

</body>

</html>


写回答 关注

3回答

  • 山巅对弈
    2017-04-10 17:22:21
    已采纳

    全部的代码：

    <html>

    <head>

    <meta charset="UTF-8">

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

    <style type="text/css">

    /* CSS样式制作 */

    * {padding: 0; font-size: normal; font-family: "Microsoft Yaihei"; }

    li { padding: 5px 20px; border: 1px solid black; list-style: none; display: inline; margin-left: 10px; }

    div { border: 1px solid blue; margin-left: 4px; }

    #head { border: none; }

    .ion { display:none;}

    ul li.on {border-bottom: white;border-top: blue;cursor: pointer;}

    </style>

    <script type="text/javascript">

    // JS实现选项卡切换

    window.onload = function() {

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

    var c = document.getElementById("head");

    var t = c.getElementsByTagName("div");

    for(var i = 0, len = h.length; i < len; i++) {

    h[i].index = i;

    h[i].onclick = function() {

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

    h[n].className = "";

                    t[n].className = "ion";

    }

    this.className = "on";

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

    }


    }

    }

    </script>


    </head>


    <body>

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

    <div id="head">

    <ul>

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

    <li>家居</li>

    <li>二手房</li>

    </ul>

    <div>

    275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房

    </div>

    <div class="ion">

    40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计

    </div>

    <div class="ion">

    通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万

    </div>

    </div>

    </body>

    </html>


    1 0

    qq_我本非...

    非常感谢！

    2017-04-10 21:22:11

    共 1 条回复 >

  • 山巅对弈
    2017-04-10 17:21:40

    其次是：第二个循环

     h[n].className="";

    t[n].className="ion";

    调取的是class，而你在html中设置的是id




    0 0
  • 山巅对弈
    2017-04-10 17:11:46

    首先display后面你那个是分号，html样式就显示不正确

    #ion { display:none;}

    0 0

JavaScript进阶篇

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

468060 学习 · 21891 问题

查看课程

相似问题

哪里有问题~~

回答 2

哪里有问题？

回答 3

哪里有问题

回答 3

哪里有问题？

回答 3

哪里有问题？

回答 1

打开慕课网App查看更多内容