javascript - Alert() 有效，而 elem.classList.add() 不会在 li 元素处添加类

Question

我想在点击#tabs_ul中的每个li时添加一个类，但它不起作用。我尝试看看使用alert()是否可以工作，确实可以。为什么它不这样做？我正在努力摆脱这个问题

<script>
function clickme(){
var elem = document.getElementById('tabs_ul').querySelectorAll('li');
for(var f = 0; f < elem.length; f++){
elem[f].addEventListener('click', changeclass);
}};

function changeclass(){
alert('cliccato'); // This is shown
elem.classList.add('active_tab'); // This doesn't work
};

addEventListener('load', clickme);
</script>

这里是正文中的代码

<div id="tabs">
<ul id="tabs_ul">
<li class=""><a href="#tabs-1"><strong>Description</strong></a></li>
<li class=""><a href="#tabs-2"><strong>Gallery</strong></a></li>
</ul>
<div id="tabs-1">
</div>
</div>

Answer 1

elem 尚未在 changeclass 范围内定义

您可以使用event.target来代替:

function changeclass(evt){
  evt.target.classList.add('active_tab');
};

或者，您可以将元素绑定(bind)到函数:

for(var f = 0; f < elem.length; f++){
  elem[f].addEventListener('click', changeclass.bind(elem[f]));
}};

function changeclass(){
  this.classList.add('active_tab');
};