点击addEventListener时，不要选择“ this”

Question

I have a loop with addEventListener function:

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

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

As you can see, I want to add .active class name to my li on click event. But also, I want to remove .active class, from my others li 's. How can I do this trick?

Here is a example.

 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

Try to remove active class from all the elements first,

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

Since you have only one active class to be set, you can alter the code like below,

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

Answer 2

Here is your fixed jsFiddle:

I just added function to access your cached tabs and remove the previous selected then apply new class on click.

 var tabs = document.getElementsByClassName('tab'); function changeSelectedTab(tabEl) { for (var t = 0; t < tabs.length; t++) { tabs[t].className = 'tab'; }; tabEl.className += ' active'; } for (var t = 0; t < tabs.length; t++) { tabs[t].addEventListener('click', function(){ changeSelectedTab(this); }, 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>