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");
    });
}

它表现出类似的东西未捕获的TypeError：无法设置未定义的属性“className” 我的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>

如果有人能帮助我解决这个问题，我会非常感激。 Muchas gracis

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");
    });
}

未捕获的TypeError：无法在js中设置未定义的属性'className'

3 个答案: