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

为什么我这个切换实现不了,提示说获得div标签组的属性为空

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

    body,div,ul,li,p,a{

        margin:0px;

        padding:0px;

    }

    ul li{

        list-style:none;

    }

    #box{

        width:300px;

        height:200px;

        position:relative;

    }

    #box ul li{

        float:left;

        width:60px;

        height:30px;

        border:1px solid #BBBBBB;

        text-align:center;

        line-height:30px;

        margin-left:5px;

        cursor:pointer;

    }

    #box div{

        width:300px;

        height:200px;

        position:absolute;

        top:40px;

        margin-left:5px;

        font-size:14px;

    }

    .show{

        display:block;

    }

    .hide{

        display:none;

    }

    </style>

    <script type="text/javascript">

    var oBox = document.getElementById("box");

    var oUl = document.getElementById("BB");

    var oLi = oUl.getElementsByTagName("li");

    var CT = oBox.getElementsByTagName("div");

    // JS实现选项卡切换

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

        oLi[i].index = i;

        oLi[i].onclick = function(){

            for(var n = 0;n < oLi.length;n++){

                oLi.className = '';

                CT.className = 'hide';

            }

            this.className = '';

            CT[this.index].className= 'show';

        }

    }

    </script>

 

</head>

<body>

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

    <div id="box">

        <ul id="BB">

            <li>房产</li>

            <li>家居</li>

            <li>二手房</li>

        </ul>

        <div class="show">

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

        <br /><br />

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

        <br /><br />

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

        <br /><br />

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

        </div>

        <div class="hide">

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

        <br /><br />

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

        <br /><br />

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

        <br /><br />

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

        <br /><br />

        </div>

        <div class="hide">

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

        <br /><br />

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

        <br /><br />

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

        <br /><br />

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

        </div>

    </div>


 

</body>

</html>


正在回答

1 回答

var text = document.getElementById('text');

var lis = document.getElementsByTagName('li');

var btns = document.getElementsByTagName('button');

var box = document.getElementById('box');

// 遍历

         function each(array,fn){

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

                 fn(i,array[i]);

                 }

         }

each(btns,function(index,ele){

             ele.onclick = function(){

                         classMethod.addClass(index,ele)

             }

   })

         var classMethod = {

                clearClass:function (className,parentNode){

                     var pattern = new RegExp('(^|\\s+)' + className + '($|\\s+)');

                     var allNodes = parentNode.getElementsByTagName('*');

                     parentNode = parentNode || document;

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

                         if(pattern.test(allNodes[i].className)){

                         allNodes[i].className ="";

                     }

              }

        },

        addClass:function (index,ele){

                         if(lis[index].className){

                                  return;

                         }else if(!lis[index].className){

                                 classMethod.clearClass("active",text);

                                 classMethod.clearClass('zIdx',box);

                                 lis[index].className = "active";

                                 ele.className ="zIdx";

                         }

                 }

    }


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

举报

0/150
提交
取消

为什么我这个切换实现不了,提示说获得div标签组的属性为空

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号