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

标题非常简洁的切换方法,但不知道问题出在哪里?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

        *{

         margin:0;

         padding:0;

         box-sizing: border-box

         }

        body{

            width:100%;

            height:100%;

        }

        .con{

            width:100%;

            height:100%;

            margin:10px auto;

        }

        .houseInfo{

            border:1px solid #ccc;

            border-bottom:2px solid red;

            font-size:16px;

            font-family:"黑体";

            display:inline-block;

            line-height:30px;

            padding:0 20px;

            border-radius:2px;

        }

        ul{

            margin-top:-2px;

            min-height:110px;

            padding-top:10px;

            border:1px solid blue;

            border-top:2px solid red;

        }

        

        li{

           padding-left:5px;

           list-style:none;

           line-height:20px;

           font-size:12px;

           font-weight:bold;

           font-family:"微软雅黑";

           }

        .tabOn{

           border-top:2px solid red;

           border-bottom:2px solid #fff;

        }

       

    </style>

    

 

</head>

<body>

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

    <div>

        <h4 class="houseInfo tabOn">房产</h4>

        <h4>家居</h4>

        <h4>二手房</h4>

        <ul id="info1">

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

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

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

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

        </ul>

        <ul id="info2">

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

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

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

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

        </ul>

        <ul id="info3">

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

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

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

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

        </ul>

    </div> 


 <script type="text/javascript">

    // JS实现选项卡切换

     window.onload = function(){

        console.log(111);

    var houseInfo=document.getElementsByClassName("houseInfo");

     

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

     var houseInfo[i].index=i;

        this.onclick=function(){

            this.className("houseInfo tabOn");

            var info=document.getElementsById("info"+(this.index+1));

            info.style.display="block";

            var houother=sibling(houseInfo[i]);

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

                houother[j].className("houseInfo");

            }

            var infother=sibling(info);

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

                infother[j].style.display="none";

            }

        })

    }

    }

    

    function sibling(elem) { 

    var r = []; 

var n = elem.parentNode.firstChild; 

for ( ; n; n = n.nextSibling ) { 

   if ( n.nodeType === 1 && n !== elem ) { 

       r.push( n ); 

   } 

return r; 

}

    

    

    

    </script>

</body>

</html>


正在回答

2 回答

我的意思是可以实现多个选项卡的切换,多谢你的回答~

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


问题很多,样式是块级元素与行级元素理解不清。js不仅语法上存在错误,而且逻辑上可能你想多了,因此直接重写代码如下,你看自己能否看懂。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

        *{

         margin:0;

         padding:0;

         box-sizing: border-box

         }

        body{

            width:100%;

            height:100%;

        }

        .con{

            width:100%;

            height:100%;

            margin:10px auto;

        }

        /*.houseInfo{   改样式*/
          h4{

            border:1px solid #ccc;

            border-bottom:2px solid red;

            font-size:16px;

            font-family:"黑体";

            display:inline-block;

            line-height:30px;

            padding:0 20px;

            border-radius:2px;

        }

        ul{

            margin-top:-2px;

            min-height:110px;

            padding-top:10px;

            border:1px solid red;       /*改blue为red */

            border-top:2px solid red;

            width: 250px;               /*给宽度*/

        }

        

        li{

           padding-left:5px;

           list-style:none;

           line-height:20px;

           font-size:12px;

           font-weight:bold;

           font-family:"微软雅黑";

           }

        .tabOn{

           border-top:2px solid red;

           border-bottom:2px solid #fff;

        }
      
        /*增加辅助类*/
       .show{display: block;}
       .hide{display: none;}

    </style>

</head>

<body>

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

    <div>

        <h4 class="tabOn">房产</h4>

        <h4>家居</h4>

        <h4>二手房</h4>

        <ul id="info1">

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

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

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

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

        </ul>

        <ul id="info2" class="hide">    

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

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

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

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

        </ul>

        <ul id="info3" class="hide">

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

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

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

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

        </ul>

    </div> 


 <script type="text/javascript">

    // JS实现选项卡切换

     window.onload = function(){

        // console.log(111);

    var oH=document.getElementsByTagName("h4");
    var oU=document.getElementsByTagName("ul");
     

    for(var i=0;i<oH.length;i++){
        oH[i].index = i;
        oH[i].onclick = function(){
           for(var j=0;j<oH.length;j++){
              oH[j].className='';
              oU[j].className='hide';
           }
           this.className = 'tabOn';
           oU[this.index].className = 'show';
        }
    }
}

</script>
</body>
</html>


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

paraofheaven 提问者

我的意思是可以实现多个选项卡的切换,多谢你的回答~
2015-10-09 回复 有任何疑惑可以回复我~
#2

paraofheaven 提问者

哦,不同选项卡对应的内容也不同
2015-10-09 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

标题非常简洁的切换方法,但不知道问题出在哪里?

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

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

帮助反馈 APP下载

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

公众号

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