老师，我不知道动了哪里，改不回来。能帮我看看吗？

html 文件

------------------------------

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

<a href="">手机储存卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</a>

</div>

</div>

</body>

</html>

---------------------------

css文件

----------------------------

*{margin: 0;

padding: 0;}

body{

font-family: 微软雅黑;

color: #14191e;

}

a{text-decoration: none;}

a:link,a:visited{color:#5e5e5e;}

.main{width: 1200px;height:460px;margin: auto;overflow:hidden;position:relative;}

@font-face{font-family:'iconfont';

src: url(../img/font/iconfont.eot);

scr:url(../img/font/iconfont.eot) format('embedded-opentype');

src: url(../img/font/iconfont.svg) format('svg');

src: url(../img/font/iconfont.ttf) format('truetype');

src: url(../img/font/iconfont.woff) format('woff');

}

/*banner图*/

.banner{width: 1200px;height:460px;margin: auto;overflow:hidden;}

.slide-active{display:block;}

.banner-slide{width: 1200px;height:460px;float: left;display: none;}

.slide1{background:url(../img/bg1.jpg) no-repeat;display: block;}

.slide2{background:url(../img/bg2.jpg) no-repeat;}

.slide3{background:url(../img/bg3.jpg) no-repeat;}

.button{

height:80px;

width:40px;

position:absolute;

top:50%;

left: 244px;

margin-top:-40px;

background:url(../img/arrow.png) center center no-repeat;

transform:rotate(180deg);

;}

.button:hover{background-color: #333;}

.next{

left:auto;

right:0;

transform:rotate(0deg);}

.dots{

position:absolute;

bottom: 24px;

right:0;

text-align:right;

padding-right:24px;

}

.dots span{

display: inline-block;

width:12px;

height:12px;

border-radius:50% ;

box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;

background-color:rgba(7,17,27,0.4);

cursor:pointer;

margin-left:8px

}

.dots span.active{

background-color: #ffffff;

box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;

}

/*菜单*/

.menu-box{

width: 244px;

height:460px;

position:absolute;

top:0;

left:0;

background-color: rgba(7, 17, 27, 0.5);

opacity:0.5 ;

z-index:1

}

/*主菜单*/

.menu-content{width:244px;

height:460px;

position:absolute;

top:0;

left:0;

z-index:2;

}

.menu-item{height:64px;

line-height: 66px;

cursor:pointer;

padding:0 24px;

position: relative;

}

.menu-item a{

font-size:16px;

display: block;

color:#fff;

border-bottom:1px rgba(255,255,255,0.4) solid;height:63px;padding:0px 8px;}

.menu-item :last-child a{border-bottom:none;}

.menu-item i{

position:absolute;

top:2px;

right:32px;

font-family:'iconfont';

font-size: 24px;

font-weight: normal;

font-style: normal;

color:rgba(255,255,255,0.5)

}

.sub-menu{

position:absolute;

top:0;

left:244px;

border:1px solid #d9dde1;

box-shadow:0 4px 8px 0px rgba(0, 0, 0, 0.1);

background:#fff;

width: 730px;

height: 458px;

z-index: 581;

}

.hide{display: none;}

.inner-box{width:100%;

height:100%;

background:url(../img/fe.png) no-repeat;

display: none;

}

.sub-inner-box{width:652px;

margin-left:40px;

overflow: hidden;

}

.title{font-size:16px;

color:#f01414 ;

margin:20px 0 30px 0px ;

font-weight: bold;

line-height: 16px;

}

.sub-row {margin-bottom: 25px;}

.bold{font-weight:700px;}

.mr{margin-right:10px;}

.ml{margin-left:10px;}

-------------------------------------

js 文件

-----------------------------------------

var index=0,

prev=byId("prev"),

next=byId('next'),

pics=byId('banner').getElementsByTagName('div'),

size=pics.length,

dots=byId('dots').getElementsByTagName('span'),

timer=null,

main=byId("main"),

mainBox=byId("main-box"),

menuItem=byId("menu-content").getElementsByTagName("div"),

subMenu=byId("sub-menu");

//封装获取id的方法

function byId(id){return typeof(id)==="string"?document.getElementById(id):id}

//封装一个ie和非ie浏览器通用的方法

function addHandler(element,type,handler){

//非ie浏览器

if(element.addEventListener){element.addEventListener(type,handler,true);}

else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element[type]=handler;}}

function changeImg(){

for(var i=0 ;i<size;i++){

pics[i].style.display="none";

dots[i].className="";

}

pics[index].style.display="block";

dots[index].className="active";}

//next按钮播放下一张图片

addHandler(next,"click",function(){

index++;

if(index>=size){index=0;}

changeImg();

})

//next按钮播放上一张图片

addHandler(prev,"click",function(){

index--;

if(index<=0){index=size-1;}

changeImg();

})

//点击原点

for(d=0;d<size;d++){

dots[d].setAttribute("dis",d);

addHandler(dots[d],'click',function(){

index=this.getAttribute("dis");

changeImg();

})

}

//定时器

function startAutoPlay(){

timer=setInterval(function(){index++;if(index>=size){index=0;};changeImg()},3000)

}

//清除定时器

function stopAutoPlay(){

if(timer){

clearInterval(timer);

}

addHandler(main,"mouseover",stopAutoPlay);

addHandler(main,"mouseout",startAutoPlay);

startAutoPlay();

for(mlen=0;mlen<menuItem.length;mlen++){

menuItem[mlen].setAttribute("date-item",mlen);

addHandler(menuItem[mlen],"mouseover",function(){

subMenu.className="sub-menu";

var idx=this.getAttribute('sub-menu');

for(var m=0;m<menuItem.length;m++){

subMenu[m].style.display="none";menuItem[m].style.background = "none";

}

subItem[idx].style.display="block";

menuItem[idx].style.background = "rgba(0,0,0,0.1)";

})

}

慕用6222994 2020-06-19

源自：项目：JS实现轮播图特效 3-6 菜单脚本（1）

收起

2回答

好帮手慕言 2020-06-20 10:00:44

同学你好，遇到问题不要慌，先打开控制台(以谷歌为例，可以按F12)，

1、在鼠标移入主菜单时，控制台有报错，如下：（报错的行数可能不准确，但也八九不离十了）

出现这种报错，一般是因为元素获取的有问题。显示隐藏的应该时类名为inner-box的元素，因此先获取元素

2、修改之后还是有和上方相同会报错，那么很有可能就是索引的问题，打印索引发现为null

控制台：

现在就可以确定是索引的问题，可以修改如下：

3、老师使用的是subItems哦，同学可以仔细看第一条。

html写错控制台不会报错，可以在html文件中慢慢查找问题。

同学可以把遇到的问题都做一个总结，以后再遇到类似的报错就可以快速解决啦。

祝学习愉快~

收起回答

提问者慕用6222994 #1

按照老师方法，我终于学会怎么发现错误，并且改回了。感谢

2020-06-20 18:31:44

好帮手慕言 2020-06-19 15:26:39

同学你好，有以下问题

1、代码中多了两个div的闭合标签，去掉即可。如下：

2、最后一个sub-inner-box要放在inner-box里，嵌套如下：

3、获取元素

idx获取的有问题，具体操作如下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕用6222994 #1

老师，我看半天越看越懵逼，你是怎么发现问题的？能详细分享吗？

2020-06-19 20:38:11
提问者慕用6222994 #2

老师，我设置的是subItem呢，不是subItems。你怎么测试通过的？设置的属性也是date-item呢

2020-06-19 21:06:49