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

Question

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

以下是我的代码：

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

- Roster

---

有很多选项，例如 $(".tab-div").removeClass("active") 或者 $(this).addClass("active").siblings().removeClass("active")。有趣的是你标记了这个问题为jquery，但是在你的问题中并没有jquery！ - freedomn-m

谢谢，我需要使用纯JavaScript实现，已经移除了jQuery标签。 - Roster

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>

- Ankit Agarwal

Answer 2

我认为这取决于你最终会有多少个 div，以及是否只有一个 div 应该是活动状态，但我认为更有效的方法是找到活动的 div 并从那个中删除类，而不是遍历所有的 div，例如：

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

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

- Code_Frank

---

不要使用 event.target，而应该使用 this（或者 event.currentTarget）。event.target 可能是 div 中的一个元素，而 this/event.currentTarget 会可靠地返回绑定事件的元素。 - T.J. Crowder

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

- Emjay