老师,第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回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星