如何在不使用jQuery的情况下使用for循环使用javascript遍历DOM元素

Question

for循环的变量在尝试循环DOM元素时不会更改。

我尝试使用不同的javascript DOM文档方法。我调查了语法错误。我已经尝试过forEach（）方法。我现在被困了好几天。

...

 <div class="tabs">
    <a href=""><span class="active">Add</span></a>
    <a href=""><span>Delete</span></a>
    <a href=""><span>Post</span></a>
  </div>

...

var i;
for(i = 1; i <= 3; i++){
    document.querySelector(".tabs a:nth-child("+i+") span").onclick = function(){
    console.log(i);
    return false;
  }
}

我试图将这3个锚点链接用作标签，以根据单击哪个标签显示不同的文本或消息。我想使用for循环，这样我就不必为每个选项卡编写代码，因为我以后会添加更多内容。但是循环就是我被困住的地方。单击哪个选项卡都没有关系，变量保持不变。