星回节五 2021-08-23 20:19 采纳率: 0%
浏览 36
已结题

Uncaught TypeError: Cannot set property 'className' of undefined

liItem[i].className = 'current';//第一种方式
liItem[i].setAttribute('class','current');//第二种方式
this.className = 'current';//第三种方式
为什么第三种方式可以使点击变色效果实现而第二、三两种方式都会报错呢?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <style type="text/css">
            body {
                position: relative;
                width: 100vw;
                height: 100vh;
                background-repeat: no-repeat;
            }
            /* ul,li {
                margin: 0px;
                padding: 0px;
            } */
            .box {
                width: 80vw;
                height: 80vh;
            }
            ul {
                width: auto;
                height: auto;
                margin: 0px;
                padding: 0px;
                border: none;
                list-style-type: none;
                background-color: rgba(50,150,150,0.3);
            }
            li {
                display: inline-block;
                padding: 4px;
                
            }
            .current {
                color: #FFFFFF;
                background-color: #2AC845;
            }
            .currentContent {
                display: '';
            }
            .none {
                display: none;
            }
        </style>
</head>
<body>
        <div class="box">
            <div class="nav-list">
                <ul>
                    <li class="current">首页</li>
                    <li class="">下载</li>
                    <li>最新资讯</li>
                    <li>最新资讯</li>
                </ul>
            </div>
            <div class="content">
                <p class="">
                    这是具体内容1
                </p>
                <p class="none">
                    这是具体内容2
                </p>
                <p class="none">
                    这是具体内容3
                </p>
                <p class="none">
                    这是具体内容4
                </p>
            </div>
        </div>
    <script type="text/javascript">
        var liItem = document.getElementsByTagName('li');
        var con = document.querySelector('.content').querySelectorAll('p');
        for(var i = 0;i < liItem.length;i ++) {
            liItem[i].onclick = function () {
                // liItem[i].className = 'current';//第一种方式
                 // liItem[i].setAttribute('class','current');//第二种方式
                this.className = 'current';//第三种方式
            }
        }
    </script>
</body>
</html>

  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 8月31日
      • 已采纳回答 8月23日
      • 创建了问题 8月23日

      悬赏问题

      • ¥15 keil MDK软件进行仿真调试的局限
      • ¥15 关于gateway产生临时文件夹的问题
      • ¥15 Java Broken Pipe以及OOM
      • ¥20 请问有没有RTL8211FS的参考原理图
      • ¥30 esp32的platfromio工程添加文件就会编译失败
      • ¥15 linux下运行VASP报错
      • ¥15 python里面查找赋值,如何可以在剩余未空值的行里面进行进一步的筛选呢?
      • ¥15 电路分析的综合实验有没有会的
      • ¥15 #硬件设计#PNP三级管输出设计问题
      • ¥30 ORACLE的procedure突然需要重新编译是为什么?