Question

未捕获的类型错误：无法在 js 中设置未定义的属性‘className’[重复]

2017-05-15

3662

javascript html css

当我尝试将一个类名添加到我的 js 代码中时，如下所示

var a = document.querySelectorAll('.nav-tabs');
    for(var i=0 ; i<a.length; i++){
    a[i].addEventListener('click',function(){
        a[i].classList.add("active");
    });
}

它显示类似 Uncaught TypeError: Cannot set property 'className' of undefined 并且我的 html 看起来像这样

<nav>
    <div class="container" id="container">
    <ul class="nav nav-tabs">
         <li role="presentation"><a href="#">a</a></li>
         <li role="presentation"><a href="#">b</a></li>
         <li role="presentation"><a href="#">c</a></li>
    </ul>
    </div>
</nav>

如果有人能帮助我解决这个问题，我将不胜感激。非常感谢

Answer 1

var a = document.querySelectorAll('.nav-tabs');
for(var i=0 ; i<a.length; i++){
    a[i].addEventListener('click',function(){
        this.classList.add("active");
    });
}

Answer 2

您提供给 addEventListener 的函数使用 this 来处理元素本身。因此，您只需编写：

a[i].addEventListener("click",function(){
    this.classList.add("active");
});

此外，我认为您真正想要的是将其添加到 li 或 a 元素，而不是 ul ，因此选择器应如下所示：

document.querySelectorAll('.nav-tabs a');

此外，您可能希望从旧元素中删除 active 类，否则最终所有元素都具有 active 类。

var a = document.querySelectorAll('.nav-tabs a');
a.forEach(function(e){e.addEventListener('click',function(){
        var active = document.querySelector('.active');
        active && active.classList.toggle("active");
        this.classList.add("active");
    });
});

.active{
  color:red;
}

<nav>
    <div class="container" id="container">
    <ul class="nav nav-tabs">
         <li role="presentation"><a href="#">link a</a></li>
         <li role="presentation"><a href="#">link b</a></li>
         <li role="presentation"><a href="#">link c</a></li>
    </ul>
    </div>
</nav>

Answer 3

您似乎正在尝试将类名添加到每个 <li> 中？

以下方法有效：

var a = document.querySelector('.nav-tabs').children;
    for(var i=0 ; i<a.length; i++){
      console.log(i)
      console.log(a[i])
    a[i].addEventListener('click',function(){
        this.classList.add("active");
    });
}