为什么big_ka[i].className+=" active";实现不了,帮我看看,逻辑哪里不对,急急急

来源:10-1 编程挑战

qq_简_8

2017-07-27 10:43

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

     .big{

         position:relative;

         width:300px;

         height:300px;

     }

     .main li{

         list-style:none;

         display:inline-block;

        border-style:solid;

        border-bottom-color:#FFF;

        width:50px;

        line-height:30px;

     }

     .down{

         position:absolute;

         top:32px;

         left:0;

         width:300px;

         height:200px;

         overflow:hidden;

         border-style:solid;

         display:none;

     }

.main:hover li{

cursor:pointer;

}

     .active{

         display:block;

     }

    </style>


 

</head>

<body>

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

<div id="big1">

    <div id="main1">

    <ul>

        <li><a href="javascript:switch1" id="fangchan">房产</a></li>

        <li><a href="javascript:switch1" id="jiaju">家居</a></li>

        <li><a href="javascript:switch1" id="ershoufang">二手房</a></li>

    </ul>

    </div>

    <div class="down  active ">


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

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

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

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

 

    </div>

    <div>


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

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

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

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

  

    </div>

    <div>

  

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

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

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

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

  

    </div>

    

    

</div>


 

</body>

    <script type="text/javascript">


      function switch1(){

  var main_i = document.getElementById("main1");

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

var big_ka = document.getElementsByClassName("down");

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

main_s[i].onmouseover=function(){

for(var k=0;k<=big_ka.length;k++){

big_ka[k].className=big_ka[k].className.replace("active","");


}

big_ka[i].className+=" active";

}

}

 }   

    // JS实现选项卡切换

    window.onload=function(){

       switch1();

}

    

    </script>

</html>


写回答 关注

1回答

  • 慕粉2116461053
    2017-08-09 10:44:44

    循环时超过索引了,  一共三个元素,索引为  0 ,1 ,2

    i<=main_s.length   =》     i<main_s.length

    k<=big_ka.length   = 》   k<big_ka.length

JavaScript进阶篇

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

468061 学习 · 21891 问题

查看课程

相似问题