點擊addEventListener時，不要選擇“ 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類。 我該怎么做？

這是一個例子。

 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

Answer 2

這是您的固定jsFiddle：

我剛剛添加了訪問您的緩存選項卡的功能，並刪除了先前選擇的選項，然后單擊應用新類。

 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>