原生JS获取点击元素ID问题：仅首个<li>触发且返回tab-1

从你描述的现象——只有第一个<li>能触发点击，而且不管点啥都弹出tab-1，其他元素完全没反应——来看，这大概率是事件绑定的逻辑出了问题，常见的两种场景如下：

场景1：你只给第一个标签绑定了事件 #

如果你的JS代码里只获取了第一个.tabs-heading元素并加了点击事件，那自然只有第一个能触发，其他标签根本没绑定事件。比如你可能写了这样的代码：

// 错在querySelector只会选第一个匹配的元素
const tab = document.querySelector('.tabs-heading');
tab.onclick = function() {
  console.log(this.id);
};

或者干脆只给tab-1用getElementById绑定了事件，完全没处理其他标签。

怎么改？ #

你需要遍历所有.tabs-heading元素，给每一个都绑定点击事件：

// 先拿到所有标签元素
const tabs = document.querySelectorAll('.tabs-heading');

// 逐个绑定事件
tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    console.log(this.id); // 用this就能拿到当前点击的那个元素的ID
  });
});

场景2：循环绑定事件时踩了var的作用域坑 #

如果你用了var声明循环变量（不是let/const），因为var是函数级作用域，所有事件回调都会共享同一个变量，最后要么报错，要么就始终指向同一个元素（比如你这里的tab-1，可能是循环逻辑写错导致变量一直指向第一个）。比如错误代码可能是这样：

const tabs = document.getElementsByClassName('tabs-heading');
for (var i = 0; i < tabs.length; i++) {
  tabs[i].onclick = function() {
    console.log(tabs[i].id); // 这里的i最后会变成tabs.length，要么报错，要么逻辑出错指向第一个
  };
}

怎么改？ #

有两种简单的修复方式：

1. 把var换成let：let有块级作用域，每个循环迭代都会创建新的变量实例，不会共享：

const tabs = document.getElementsByClassName('tabs-heading');
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    console.log(tabs[i].id);
  });
}

2. 直接用this获取当前元素：不用依赖循环变量，更直观：

const tabs = document.querySelectorAll('.tabs-heading');
tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    console.log(this.id);
  });
});

额外推荐：更高效的事件委托 #

如果你的标签可能会动态添加（比如后续通过JS新增标签），推荐用事件委托——把事件绑定到父元素<ul>上，利用事件冒泡来处理所有子标签的点击。这样不用给每个元素单独绑定事件，性能更好，还能自动处理新增的标签：

const tabList = document.querySelector('.tabs ul');
tabList.addEventListener('click', function(e) {
  // 先判断点击的是不是我们要的标签元素
  if (e.target.classList.contains('tabs-heading')) {
    console.log(e.target.id);
  }
});

内容的提问来源于stack exchange，提问作者RS92