javascript - 单击时添加事件监听器，选择不是 `this`

Question

我有一个带有 addEventListener 函数的循环:

var tabs = document.getElementsByClassName('tab');

for (var t = 0; t < tabs.length; t++) {
  tabs[t].addEventListener('click', function(){
    this.className += ' active';
  }, false);
}

如您所见，我想在点击事件上将 .active 类名添加到我的 li 中。 而且，我想从其他 li 中删除 .active 类。我怎样才能做到这一点？

Here就是一个例子。

var tabs = document.getElementsByClassName('tab');

for (var t = 0; t < tabs.length; t++) {
  tabs[t].addEventListener('click', function(){
    this.className += ' active';
  }, false);
}

.tabs {
  display: inline-block;
  ul {
    list-style-type: none;
    li {
      cursor: pointer;
      float: left;
      padding: 10px 40px;
      background: #FDFDFD;
      &.active {
        background: #8F95B0;
        color: #FFF;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }
  }
}

<div class="tabs">
  <ul>
    <li class="tab active">Product Overview</li>
    <li class="tab">Specifications</li>
    <li class="tab">Related products</li>
  </ul>
</div>

Answer 1

首先尝试从所有元素中删除active类，

var tabs = document.getElementsByClassName('tab');

for (var t = 0; t < tabs.length; t++){
  tabs[t].addEventListener('click', function(){
    //~~~~~~~~~~~~~~~~~~~~~
    //select all the elements with class active
    Array.from(document.querySelectorAll(".active")).forEach(function(itm){
        itm.classList.remove("active")
    });
    //And remove the class active from it.
    //~~~~~~~~~~~~~~~~~~~~~
    this.classList.add('active');
  }, false);
}

DEMO

由于您只需要设置一个事件类，因此您可以更改如下代码，

var tabs = document.getElementsByClassName('tab');

for (var t = 0; t < tabs.length; t++){
  tabs[t].addEventListener('click', function(){
   document.querySelector(".active").classList.remove("active")
   this.classList.add('active');
  }, false);
}

DEMO