代码哪里有问题啊-慕课网

首页课程实战体系课手记专栏慕课教程

代码哪里有问题啊

来源：10-1 编程挑战

余生敲代码

2020-03-12 11:24

<!DOCTYPE html>

<html>

<head>

/* 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>

// 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>

<ul>

</ul>

<div>

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

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

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

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

</div>

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

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

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

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

</div>

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

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

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

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

</div>

</body>

</html>

写回答关注

3回答

初学小小白

2020-08-04 10:09:27

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>

    

    <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 0
慕妹9005482

2020-06-11 15:57:10

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

0 0
精慕门3088363

2020-03-15 09:52:04

在js里面加上延迟加载：
window.addEventListener('load', function() {});

0 0

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题

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

回答 1

代码那里有问题啊？

回答 4

这个代码哪里有问题?

回答 2

不知道代码哪里有问题

回答 3

这段代码哪里有问题呢？

回答 2

打开慕课网App查看更多内容