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

触发android.library.reference.1=CordovaLib cordova.system.library.2=com.google.android.gms:play-services-auth:11. cordova.system.library.3=com.google.android.gms:play-services-identity:11.事件时，您不会从所有元素中删除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;
}

Answer 2

我认为这取决于你最终会有多少div个，如果一次只有一个div应该是活跃的，但我认为找到活跃的{{{{{{ {1}}并从该类中删除该类，而不是循环遍历所有类，例如

div

Answer 3

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

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

如果班级在家长中，您可以这样做

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

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

3 个答案: