为什么用//中的内容替换 就没有效果

来源:10-1 编程挑战

HoooooHooo

2016-04-23 11:43

     for(var j=0;j<li.length;j++){

            if(li[j]==obj){

                //li[j].class="on";

                //div[j].class="";

                li[j].setAttribute('class','on');

                div[j].setAttribute('class','');

            }

            else{

                //li[j].class="";

                //div[j].class="hide";

               li[j].setAttribute('class','');

                div[j].setAttribute('class','hide');

            }   

        }   

        

       

        

    }


写回答 关注

2回答

  • cyb7712310
    2016-06-13 18:44:30

    //li[j].class="on";

                    //div[j].class="";

    要用className,js直接用class是不行的

    li[j].className="on";

                    div[j].className="";


  • HoooooHooo
    2016-04-23 11:44:01

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

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

        <style type="text/css">

         /* CSS样式制作 */ 

         *{padding:0;margin:0;}

         #tabs ul li{float:left;list-style:none;background:#fff;border:1px solid #ccc;margin:15px 15px 0 0 ;width:50px;height:21px;text-align:center;border-bottom:none;font-family:"Microsoft Yahei";font-size:14px;}

         ul{width:250px;height:42px;}

         #tabs{margin:40px;}

         #tabs div{border:1px solid blue;width:273px;height:110px;font-size:14px;padding:7px 0 0 5px;margin-top:-5px;margin-left:-6px;border-top:2px solid brown;font-family:"Microsoft Yahei";}

         

         

         .hide{display:none;}  

         a{text-decoration:none;color:#000;}  

        </style>

        <script type="text/javascript">

             

        // JS实现选项卡切换

        

        function tab(obj){

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

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

            var div=tab.getElementsByTagName("div");

            

            for(var j=0;j<li.length;j++){

                if(li[j]==obj){

                    //li[j].class="on";

                    //div[j].class="";

                    li[j].setAttribute('class','on');

                    div[j].setAttribute('class','');

                }

                else{

                    //li[j].class="";

                    //div[j].class="hide";

                   li[j].setAttribute('class','');

                    div[j].setAttribute('class','hide');

                }   

            }   

            

           

            

        }


        </script>

     

    </head>

    <body>

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

    <div id="tabs">

        <ul>

            <li onClick="tab(this)"><a href="#">房产</a></li>

            <li onClick="tab(this)"><a href="#">家居</a></li>

            <li onClick="tab(this)"><a href="#">二手房</a></li>

        </ul>

        <div>

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

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

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

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

        </div>

        <div>

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

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

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

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

        </div>

        <div>

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

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

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

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

        </div>


     

     


    </body>

    </html>



JavaScript进阶篇

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

468060 学习 · 21891 问题

查看课程

相似问题