首页 新闻 搜索 专区 学院

Cannot read property 'style' of undefined

0
[待解决问题]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../fa/reset.css">
<style>
.box1{
width: 400px;
height: 50px;
margin: 200px auto;
background-color: rgb(136, 136, 160);
line-height: 50px;
}
ul{
display: flex;
text-align: center;
}
li{
flex-grow: 1;
}
.a{
background-color: rgb(219, 37, 37);
color:white;
}
.box3{
width: 400px;
height: 300px;
border: 1px rgb(160, 87, 87) solid;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="box1">
<ul class="box2">
<li class="a">商品介绍
</p>
<p>规格与包装</p>
<p>售后保障
</p>
<p>评价(1000+)
</p>
</ul>
<div class="box3" style="display: block;">1111111111111111111111</div>
<div class="box3">22222222222222222222</div>
<div class="box3">33333333333333333333</div>
<div class="box3">44444444444444444444</div>
</div>
<script>
var li=document.querySelectorAll('li');
var box3=document.querySelectorAll('.box3');
for(var i=0;i<li.length;i++){
box3[i].setAttribute("index",i);
li[i].onmouseover=function(){
for(i=0;i<li.length;i++){
// 排他
li[i].className="";
}
this.className="a";
var index=this.getAttribute("index");
for(i=0;i<box3.length;i++){
box3[i].style.display="none";
}
box3[index].style.display="block";
}
}
</script>
</body>
</html>

吊车尾!的主页 吊车尾! | 菜鸟二级 | 园豆:204
提问于:2021-07-21 22:38
< >
分享
所有回答(1)
0

缺少 <p> 的开始标签:

报错是因为 index 为 null

guangzan | 园豆:198 (初学一级) | 2021-07-21 23:01

感谢!已经解决了

支持(0) 反对(0) 吊车尾! | 园豆:204 (菜鸟二级) | 2021-07-21 23:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册