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

课程

/前端开发

/JavaScript

/JavaScript进阶篇

代码哪里有问题啊

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

   *{

    margin:0px; padding:0px; font:12px normal; font-family:微软雅黑;

    }       

 #tabs{

     width:290px; height:150px; padding:5px; margin:20px;

 }

 #tabs ul{

     list-style:none; display:block; height:30px; line-height:30px;

 }

 #tabs ul li{

     float:left; width:60px; height:28px; line-height:28px; text-align:center;

     display:inline-block;margin:0px 3px; border:1px solid #aaa;border-bottom:none;

     cursor:pointer; background:#fff; list-style:none;

 }

 #tabs ul li.on{

     border-top:2px solid saddlebrown; border-bottom:2px solid #fff;

 }

 #tabs div{

     height:120px; line-height:25px; border:1px solid #336699;border-top:2px saddlebrown solid;padding:5px;

 }

 .hide{display:none;}

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

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

    var myul=tab.getElementsByTagName("ul");

     var myli=myul.getElementsByTagName("li");

     var mydiv=mytab.getElementsByTagName("div");

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

         myli[i].index=i;

         myli[i].onclick=function(){

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

                 myli[n].className="";

                 mydiv[n].className="hide";

             }

             this.className="on";

             mydiv[this.index].className=""；

         }

     }

    

    </script>

 

</head>

<body>

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

<div id="tab">

    <ul>

        <li class="on">房产</li>

        <li>家具</li>

        <li>二手房</li>

    </ul>

    <div>

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

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

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

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

    </div>

      <div class="hide">

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

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

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

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

      </div>

        <div class="hide">

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

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

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

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

        </div>

    

</div>


 

</body>

</html>


余生敲代码

2020-03-12

源自：JavaScript进阶篇  10-1

关注问题 我要回答
683
操作
收起

正在回答

3 回答

初学小小白
2020-08-04

VS CODE检查了下，基础错误两个，

        一：mydiv[this.index].className=""；的“；”写了中文的，改下；

       二：

#tabs ul li{

     float:left; width:60px; height:28px; line-height:28px; text-align:center;

     display:inline-block;margin:0px 3px; border:1px solid #aaa;border-bottom:none;

     cursor:pointer; background:#fff; list-style:none;

 }

float 和inline-block效果一样，不要重复使用，取其一就行；

三.真的是粗心的问题了，连id都写错了，不是tabs，而是tab；

最后帮你改好了，发在下面：

<!DOCTYPE html>


<html>


<head>


    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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


    <style type="text/css">

        /* CSS样式制作 */


        * {

            margin: 0px;

            padding: 0px;

            font: 12px normal;

            font-family: 微软雅黑;

        }


        #tab {


            width: 290px;

            height: 150px;

            padding: 5px;

            margin: 20px;


        }


        #tab ul {


            list-style: none;

            display: block;

            height: 30px;

            line-height: 30px;


        }


        #tab ul li {


            width: 60px;

            height: 28px;

            line-height: 28px;

            text-align: center;

            display: inline-block;

            margin: 0px 3px;

            border: 1px solid #aaa;

            border-bottom: none;

            cursor: pointer;

            background: #fff;

            list-style-type: none;


        }


        #tab ul .on {


            border-top: 2px solid saddlebrown;

            border-bottom: 2px solid #fff;


        }


        #tab div {


            height: 120px;

            line-height: 25px;

            border: 1px solid #336699;

            border-top: 2px saddlebrown solid;

            padding: 5px;

        }


        .hide {

            display: none;

        }

    </style>


    <script type="text/javascript">


   // JS实现选项卡切换

window.onload=function(){

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


    var myul = mytab.getElementsByTagName("ul");


    var myli = mytab.getElementsByTagName("li");


    var mydiv = mytab.getElementsByTagName("div");


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


        myli[i].index = i;


        myli[i].onclick = function () {


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


                myli[n].className = "";


                mydiv[n].className = "hide";


            }


            this.className = "on";


            mydiv[this.index].className = "";


        }


    }




}

     


       

    </script>




</head>


<body>


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


    <div id="tab">


        <ul>


            <li class="on">房产</li>


            <li>家具</li>


            <li>二手房</li>


        </ul>


        <div>


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


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


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


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


        </div>


        <div class="hide">


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


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


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


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


        </div>


        <div class="hide">


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


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


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


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


        </div>




    </div>






</body>


</html>


0 回复 有任何疑惑可以回复我~
收起回答
慕妹9005482
2020-06-11

要么吧script放到div后面 要么把所有js代码放到 window.onload=function(){ xxxx}  xxxx这个位置

0 回复 有任何疑惑可以回复我~
收起回答
精慕门3088363
2020-03-15

在js里面加上延迟加载：

  window.addEventListener('load', function() {});


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

举报

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

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

进入课程

本课相似问答

1 回答帮我看看代码哪里有问题啊~

4 回答代码那里有问题啊？

2 回答这个代码哪里有问题?

2 回答这段代码哪里有问题呢？

3 回答不知道代码哪里有问题
搜索更多本课相关问答

代码哪里有问题啊

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