为了账号安全,请及时绑定邮箱和手机立即绑定

哪里有问题

<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 回答

全部的代码:

<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>


0 回复 有任何疑惑可以回复我~
#1

qq_我本非凡_1 提问者

非常感谢!
2017-04-10 回复 有任何疑惑可以回复我~

其次是:第二个循环

 h[n].className="";

t[n].className="ion";

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




0 回复 有任何疑惑可以回复我~

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

#ion { display:none;}

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468268    人
  • 解答问题       21891    个

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

进入课程

哪里有问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信