如何使用JavaScript从父级的所有子级中删除活动类

Question

我已经在父级中创建了具有相同类的3 div，并在子元素上添加了活动类，并在单击第二个子元素时再次添加了活动类，但是这次我要删除第一个元素的活动状态。如何有效删除它？

这是我的代码

<div class="tab-div">
  <div class="tab">default</div>
  <div class="tab" >hover</div>
  <div class="tab">active</div>
</div>

这是我的javascript

var elements = document.querySelectorAll('.tab');
for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
    elements[i].onclick = function (event) {
        console.log("ONCLICK");
        if (event.target.innerHTML === this.innerHTML) {
            this.classList.add("active");
        }
    }
}

Answer 1

触发事件active时，您不会从所有元素中删除该类click。因此，您可以做的是再次循环到所有事件div并删除active该类click。我创建了一个自定义函数removeClass()，用于删除事件active类click。

var elements = document.querySelectorAll('.tab');
for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
    elements[i].onclick = function (event) {
        console.log("ONCLICK");
        //remove all active class
        removeClass();
        if (event.target.innerHTML === this.innerHTML) {
            this.classList.add("active");
        }
    }
}

function removeClass(){
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
  }
}

.active{
 color: green;
}

<div class="tab-div">
  <div class="tab">default</div>
  <div class="tab" >hover</div>
  <div class="tab">active</div>
</div>