老师，第78行代码中的 this 如果换成 liClick[i] 的话就会报错，麻烦老师帮忙检查一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏换肤</title>
<style>
*{
padding:0;
margin:0;
}
body{
font-size:20px;
}
.w{
width:1000px;
margin:0 auto;
}
#span1{
font-weight: 600;
}
li{
list-style:none;
box-sizing: border-box;
width:20px;
height:20px;
float:right;
}
ul{
position: absolute;
right:20px;
top:20px;
}
.head{
height:50px;
line-height: 60px;
position: relative;
}
.topbar{
background-color:#458FD2;
height: 50px;
margin-top:10px;
}
a{
text-decoration:none;
display:inline-block;
width:100px;
text-align: center;
line-height:50px;
color: aliceblue;
font-size:20px;
}
</style>
</head>
<body>
<div class="head w clearfix">
<span id="span1">前端开发博客</span>
<ul>
<li style="background:#DD5044;"></li>
<li style="background:#1CA261;"></li>
<li style="background:#458FD2;"></li>
<li style="background:#333;"></li>
</ul>
</div>
<div class="topbar w">
<a href="#">首页</a>
<a href="#">Web前端</a>
<a href="#">Java开发</a>
<a href="#">人工智能</a>
<a href="#">UI设计</a>
</div>
<script>
var topbar=document.querySelector(".topbar");
var liClick=document.querySelectorAll("li");
for(var i=0;i<liClick.length;i++){
liClick[i].onclick=function(){
topbar.style.backgroundColor=this.style.backgroundColor;
}
}
</script>
</body>
</html>用 liClick[i] 的话就是下面这样，换肤效果也无法实现
3
收起
正在回答 回答被采纳积分+1
1回答
2023版Java工程师
- 参与学习 人
- 提交作业 8788 份
- 解答问题 9886 个
综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！ 不需要基础，无需脱产即可学习，只要你有梦想，想高薪！ 全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星