老师,第78行代码中的 this 如果换成 liClick[i] 的话就会报错,麻烦老师帮忙检查一下。

老师,第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] 的话就是下面这样,换肤效果也无法实现

https://img1.sycdn.imooc.com//climg/64cdaa380932387c09380321.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小蓝 2023-08-07 09:50:27

同学你好,老师这里测试同学的代码,在浏览器中并没有任何报错并且效果与课程中是一致的,那么同学的代码是没有问题的。猜测可能是代码编辑器的误报,忽略即可。

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师