JavaScript选中元素异常：为指定tabs-heading添加is-active类失败

嘿，我来帮你搞定这个标签切换的问题～你之前的代码没生效，核心问题出在选择器的逻辑上：

你用的.tabs-heading.is-active:last-child + .tabs-heading里，:last-child是指父元素的最后一个子元素同时满足.tabs-heading.is-active，但你实际要找的是所有带这两个类的元素里的最后一个，再去选它后面的第一个.tabs-heading，这俩逻辑完全不一样，所以原选择器大概率找不到目标元素。

给你修正后的代码，逻辑更清晰也更可靠：

document.querySelector('#next-bt').addEventListener('click', function() {
  // 1. 获取所有当前激活的tabs-heading元素
  const activeTabs = document.querySelectorAll('.tabs-heading.is-active');
  // 2. 拿到最后一个激活的元素（如果有的话）
  const lastActiveTab = activeTabs[activeTabs.length - 1];

  if (lastActiveTab) {
    // 3. 找到它后面的第一个兄弟元素
    const nextTargetTab = lastActiveTab.nextElementSibling;

    // 4. 做个安全校验：确保这个元素是目标类、且未激活
    if (nextTargetTab && nextTargetTab.classList.contains('tabs-heading') && !nextTargetTab.classList.contains('is-active')) {
      nextTargetTab.classList.add('is-active');
    }
  }
});

为什么这么改？ #

• 用querySelectorAll能精准拿到所有激活的标签，再取数组最后一项，就是你要的「最后一个激活元素」，不受父元素子元素位置的限制。
• nextElementSibling直接获取下一个兄弟元素，比CSS相邻选择器更直观，也方便后续做校验。
• 加了多层判断，避免页面元素不存在时抛出错误，让代码更健壮。

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