体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老是提醒js的61行有错误

来源：4-1 导航菜单的结构

cj啦啦啦啦

2019-11-05 21:16:42

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="轮播图.css">
</head>
<body>
 <div class="main" id="main">
  <!-- 图片轮播 -->
  <div class="banner" id="banner">
   <a href="#">
    <div class="banner_slide slide1 slide_active"><img src="imge/bg2.jpg"></div>
   </a>
   <a href="#">
    <div class="banner_slide slide2"><img src="imge/bg1.jpg"></div>
   </a>
   <a href="#">
    <div class="banner_slide slide3"><img src="imge/bg3.jpg"></div>
   </a>
  </div>
  <div class="menu_box"></div>
  <!-- 子菜单 -->
  <div class="sub_menu hide" id="sub-menu">
   <!-- 手机配件 -->
   <div class="inner_box">
    <div class="sub_inner_box">
     <div class="title"><span>手机 配件</span></div>
     <div class="sub_row">
      <span class="bold mr10">手机通讯:</span>
      <a href="">手机</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机维修</a>
      <span class="mr10 ml10">/</span>
      <a href="">以旧换新</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">手机配件:</span>
      <a href="">手机壳</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机存储卡</a>
      <span class="mr10 ml10">/</span>
      <a href="">数据线</a>
      <span class="mr10 ml10">/</span>
      <a href="">充电器</a>
      <span class="mr10 ml10">/</span>
      <a href="">电池</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">智能设备:</span>
      <a href="">智能手环</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能家居</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能手表</a>
      <span class="mr10 ml10">/</span>
      <a href="">其他配件</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">娱乐:</span>
      <a href="">耳机</a>
      <span class="mr10 ml10">/</span>
      <a href="">音箱</a>
      <span class="mr10 ml10">/</span>
      <a href="">收音机</a>
      <span class="mr10 ml10">/</span>
      <a href="">麦克风</a>
     </div>
    </div>
   </div>
   <!-- 电脑 -->
   <div class="inner_box">
    <div class="sub_inner_box">
     <div class="title"><span>电脑</span></div>
     <div class="sub_row">
      <span class="bold mr10">电脑:</span>
      <a href="">笔记本</a>
      <span class="mr10 ml10">/</span>
      <a href="">平板/a>
      <span class="mr10 ml10">/</span>
      <a href="">一体机</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">手机配件:</span>
      <a href="">手机壳</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机存储卡</a>
      <span class="mr10 ml10">/</span>
      <a href="">数据线</a>
      <span class="mr10 ml10">/</span>
      <a href="">充电器</a>
      <span class="mr10 ml10">/</span>
      <a href="">电池</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">智能设备:</span>
      <a href="">智能手环</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能家居</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能手表</a>
      <span class="mr10 ml10">/</span>
      <a href="">其他配件</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">娱乐:</span>
      <a href="">耳机</a>
      <span class="mr10 ml10">/</span>
      <a href="">音箱</a>
      <span class="mr10 ml10">/</span>
      <a href="">收音机</a>
      <span class="mr10 ml10">/</span>
      <a href="">麦克风</a>
     </div>
    </div>
   </div>
   <!-- 家用电器 -->
   <div class="inner_box">
    <div class="sub_inner_box">
     <div class="title"><span>手机 配件</span></div>
     <div class="sub_row">
      <span class="bold mr10">手机通讯:</span>
      <a href="">手机</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机维修</a>
      <span class="mr10 ml10">/</span>
      <a href="">以旧换新</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">手机配件:</span>
      <a href="">手机壳</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机存储卡</a>
      <span class="mr10 ml10">/</span>
      <a href="">数据线</a>
      <span class="mr10 ml10">/</span>
      <a href="">充电器</a>
      <span class="mr10 ml10">/</span>
      <a href="">电池</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">智能设备:</span>
      <a href="">智能手环</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能家居</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能手表</a>
      <span class="mr10 ml10">/</span>
      <a href="">其他配件</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">娱乐:</span>
      <a href="">耳机</a>
      <span class="mr10 ml10">/</span>
      <a href="">音箱</a>
      <span class="mr10 ml10">/</span>
      <a href="">收音机</a>
      <span class="mr10 ml10">/</span>
      <a href="">麦克风</a>
     </div>
    </div>
   </div>
   <!-- 家具 -->
   <div class="inner_box">
    <div class="sub_inner_box">
     <div class="title"><span>手机 配件</span></div>
     <div class="sub_row">
      <span class="bold mr10">手机通讯:</span>
      <a href="">手机</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机维修</a>
      <span class="mr10 ml10">/</span>
      <a href="">以旧换新</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">手机配件:</span>
      <a href="">手机壳</a>
      <span class="mr10 ml10">/</span>
      <a href="">手机存储卡</a>
      <span class="mr10 ml10">/</span>
      <a href="">数据线</a>
      <span class="mr10 ml10">/</span>
      <a href="">充电器</a>
      <span class="mr10 ml10">/</span>
      <a href="">电池</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">智能设备:</span>
      <a href="">智能手环</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能家居</a>
      <span class="mr10 ml10">/</span>
      <a href="">智能手表</a>
      <span class="mr10 ml10">/</span>
      <a href="">其他配件</a>
     </div>
     <div class="sub_row">
      <span class="bold mr10">娱乐:</span>
      <a href="">耳机</a>
      <span class="mr10 ml10">/</span>
      <a href="">音箱</a>
      <span class="mr10 ml10">/</span>
      <a href="">收音机</a>
      <span class="mr10 ml10">/</span>
      <a href="">麦克风</a>
     </div>
    </div>
   </div>
  </div>
  <!-- 主菜单 -->
  <div class="menu_content" id="menu_content">
   <div class="menu_item">
    <span>
     <a href="">手机 配件
     <i>&#xe665;</i>
    </a>
    </span>
   </div>
   <div class="menu_item">
    <span>
     <a href="">电脑
     <i>&#xe665;</i>
    </a>
    </span>
   </div>
   <div class="menu_item">
    <span>
     <a href="">家用电器
     <i>&#xe665;</i>
    </a>
    </span>
   </div>
   <div class="menu_item">
    <span>
     <a href="">家具
     <i>&#xe665;</i>
    </a>
    </span>
   </div>
  </div>
  <!-- 上一张，下一张按钮 -->
  <a href="javascript:void(0)" class="button prev" id="prev"></a>
  <a href="javascript:void(0)" class="button next" id="next"></a>
  <!-- 圆点导航 -->
  <div class="dots" id="dots">
   <span class="active"></span>
   <span></span>
   <span></span>
        </div>
        <script src="轮播图.js"></script>
</body>
</html>

*{
 margin:0px;
 padding:0px;
}
body{
 background-color:gray;
 font-family:"微软雅黑";
}
.main{
 margin:30px auto;
 width:1200px;
    height:460px;
    overflow:hidden;
    position:relative;
}
.banner{
 width:1200px;
    height:460px;
    overflow:hidden;
    position:relative;
}
.banner_slide{
 width:1200px;
    height:460px;
    position:absolute;
    background:no repeat;
    display:none;
}
.slide_active{
 display:block;
}
.button{
    position:absolute;
    width:40px;
    height:80px;
    left:244px;
    top:50%;
    margin-top:-40px;
    background:url(imge/arrow.png) no-repeat center center;
}
.button:hover{
 background-color:#333;
 opacity:0.5;
 /*filter:alpha(opacity=80);*/*/
}
.prev{
 transform:rotate(180deg);/*旋转180°*/
}
.next{
 left:auto;
 right:0px;
}
.dots{
 position:absolute;
 right:0;
 bottom:24px;
 text-align:right;
}
.dots span{
 display:inline-block;/*为什么不写这个远点就不显示*/
 width:12px;
 height:12px;
 line-height:12px;/*这里设置这个是什么意思*/
 background-color:white;
 border-radius:50%;
 background:rgba(7,17,27,0.4);/*各个参数什么意思*/
 box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
 margin-right:20px;
 cursor:pointer;/*什么意思*/
}
.dots span.active{
 box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset; 
 background-color:white;
}
/*导航菜单*/
.menu_box{
 width:244px;
 height:460px;
 position:absolute;
 left:0px;
 top:0px;
 background:rgba(7,17,27,0.5);
 opacity:0.7;
}
.menu_content{
 width:244px;
 height:454px;
 position:absolute;
 left:0;
 top:0;
 z-index:2;
 padding-top:6px;/*这里写margin-top可以吗*/
}
a:link,a:visited{
 text-decoration:none;
 color:#333;
}
.menu_item{
    height:64px;
    line-height:66px;
    font-size:16px;
    padding:0 24px;/*是上下24px,还是左右24px*/
    position:relative;
}
.menu_item a:link,.menu_item a:visited{
 color:white;
}
.menu_item a{
 display:block;/*作用是什么，为什么写和不写效果不一样*/
    border-bottom:1px solid rgba(255,255,255,0.2);
    padding:0 8px;
}
@font-face{
 font-family:"iconfont";
 src:url("imge/font/iconfont.eot");
 src:url("imge/font/iconfont.eot") format("embedded-opentype"),
     url("imge/font/iconfont.woff") format("woff"),
     url("imge/font/iconfont.ttf") format("truetype"),
     url("imge/font/iconfont.svg#iconfog") format("svg");
}
.menu_item i{
 position:absolute;
 right:32px;
 font-size:24px;
 top:0;
 font-family:"iconfont";
 font-weight:normal;
 font-style:normal;
 color:rgba(255,255,255,0.5);
}
.sub_menu{
 width:730px;
 height:458px;
 border:1px solid #d9dde1;
 background:#fff;
 position:absolute;
 left:244px;
 top:0;
 z-index:999;
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.1);
}
.inner_box{
 width:100%;
 height:100%;
 background:url(imge/fe.png) no-repeat;
 display:none;
}
.sub_inner_box{
 width:652px;
 margin-left:40px;
 overflow:hidden;
}
.title{
 color:red;
 font-size:16px;
 line-height:16px;
 margin:28px 0 30px 0;
 font-weight:bold;
}
.bold{
 font-weight:bold;
 font-size:15px;
}
.mr10{
 margin-right:10px;
}
.ml10{
 margin-left:10px;
}
.sub_row{
 margin-bottom:25px;
}
.hide{
 display:none;
}


//封装一个代替getElementById()的方法
function byId(id){
 // return typeof(id)==="string"?document.getElementById:id;
 return typeof(id)==="string"?document.getElementById(id):id;
}
 // console.log(byId("main"));
var index=0,
timer=null,//timer仅仅是一个变量吗
pics=byId("banner").getElementsByTagName("div"),
prev=byId("prev"),
next=byId("next"),
menu=byId(menu_content),
menuItems=menu.getElementsByClassName("menu_item"),
subMenu=byId("sub_menu"),
dots=byId("dots").getElementsByTagName("span");//getElementsByTagName()什么意思
len=pics.length;
// console.log(len);
function slideImg(){
 var main =byId("main");
 //划过清除定时器，离开继续
 main.onmouseover=function(){
    //划过清除定时器
    if(timer){
     clearInterval(timer);
    }//timer为真怎么理解
 }
 main.onmouseout=function(){
    timer=setInterval(function(){
    index++;
    if(index>=len){
    index=0;
    }
    //切换图片
    changeImg();
    },3000);
 }
 //自动在main上自动触发鼠标滑过事件
 main.onmouseout();
 //遍历所有点击，且绑定点击事件，点击圆点切换图片
 for(var d=0;d<len;d++){
  //给所有span添加一个id的属性，值为d，作为当前span的索引
  dots[d].id=d;
  dots[d].onclick=function(){
   //改变index为当前span的索引
    index=this.id;
    //调用changeImg，实现切换图片
    changeImg();
  }
 }
  //导航菜单
  //遍历主菜单，且绑定事件
  for(var m=0;m<menuItems.length;m++){
   //给每一个menu_item定义data-index的属性，作为索引
   menuItems[m].setAttribute("data-index",m);
   menuItems[m].onmouseover=function(){
    var idx=this.getAttribute("data-index");
    subMenu.className="sub_menu";
   }
  }
   
    //下一张
 next.onclick=function(){
  index++;
  if(index>=len){
   index=0;
  }
  // console.log(index);
  changeImg();
 }
    
    //上一张
 prev.onclick=function(){
  index--;
  if(index<0){
   index=len-1;
  }
  changeImg();
 }
}
function changeImg(){
    // console.log(index);
    //需要遍历banner下所有的div及dots下所有的span,将div隐藏,将span清除类
    for(var i=0;i<len;i++){
     pics[i].style.display='none';
     dots[i].className="";//怎么理解？
    }
    pics[index].style.display='block';
    dots[index].className="active";    
}
slideImg();


写回答

1回答

好帮手慕小班

2019-11-06

同学你好，1、复制运行贴出代码，js中的报错内容为： Cannot set property 'className' of null--》无法设置属性“className”为空

经过测试，这是因为subMenu=byId("sub_menu")没有获取到对应的元素，此时subMenu为null，就不能设置对应的className属性，原因是在html中，这个元素的id为sub-menu而不是sub_menu，修改建议如下：

http://img.mukewang.com/climg/5dc2432609b31ce005700138.jpg

    2、display:inline-block;  /*为什么不写这个远点就不显示*/

    首先display:inline-block;-->行内块元素

    span是一个行内样式，在css中，行内元素不可以设置margin、padding等内容，所以这里将这个元素设置为inline-block，此时span就是一个行内块元素，这样就可以设置padding等内容了。

    3、line-height:12px;   /*这里设置这个是什么意思*/

    line-height属性设置行间的距离（行高），行高是包含了文字的高度在内的，设置行高设为12px，那么就是文字中心点距上或者距下各为6px，所以行高与标签的高度一样的时候就垂直居中了.

    4、background:rgba(7,17,27,0.4);/*各个参数什么意思*/

    CSS 中的颜色定义-->RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。

基本语法:

　　R：红色值。正整数 （0~255）

　　G：绿色值。正整数 （0~255）

　　B：蓝色值。正整数（0~255）

　　A：透明度。取值0~1之间

    5、cursor:pointer;/*什么意思*/

pointer-->光标呈现为指示链接的指针变为一个小手。

    6、 padding-top:6px;/*这里写margin-top可以吗*/

这里是一个6px的填充效果，这里同学使用margin-top也是可以的。

http://img.mukewang.com/climg/5dc255e809d677c108300185.jpg

    7、padding:0 24px;/*是上下24px,还是左右24px*/

当padding是两个值时，第一个代表上下的边距 ，第二个代表左右的边距 ，所以这里是左右的边距为24px。

    8、 display:block;/*作用是什么，为什么写和不写效果不一样*/

display:block-->元素将显示为块级元素,可以设置padding等内容，这里如果不加这个属性，padding等内容不会生效的，例如：

http://img.mukewang.com/climg/5dc2548809d71e2005340606.jpg

如果去掉

http://img.mukewang.com/climg/5dc254c00948e1cd04930593.jpg

    如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

0

0 学习 · 9666 问题

查看课程

相似问题

总是报错，不知道怎么解决

回答 2

main.onmouseout=function() 此项错误原因求解！

回答 1

代码中的问题

回答 1

问题在js代码注释开头注释中，麻烦老师帮忙解答

回答 2

轮播图的问题

回答 1

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