如何使用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

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

 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>

Answer 2

我想这取决于您最终将拥有多少个div ，并且一次应该只有一个div处于活动状态，但我认为仅找到活动div并从该div删除类而不是循环会更有效所有这些，例如

var oldActiveElement = document.querySelector('.active');
oldActiveElement.classList.remove('active');

var newActiveElement = event.target;
newActiveElement.classList.add('active');

Answer 3

由于它们都有一个名为tab的类，因此请确保通过定位类tab从所有类中删除active的类或属性，并且它将从所有类中删除而不进行任何循环。 然后将该属性添加到当前单击的属性。

$(".tab").click(function(){
  $(".tab").removeClass('active');  
  $("this").addClass('active');
});

如果班级在父母中，你可以做某事

$(".tab").click(function({
  $(".tab").parent().removeClass('active');
  $("this").parent().addClass('active');
});