未捕获类型错误：无法在 js 中设置未定义的属性'className'

Question

>当我尝试将类名添加到我的 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");
});
}

它显示类似的东西 未捕获的类型错误：无法设置未定义的属性"类名" 我的 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");
});
}