解决button标签内元素无法触发onclick切换内容的问题

为什么点击button内的元素无法触发切换？ #

你代码里的事件逻辑依赖e.target.dataset.id获取切换ID，但e.target指的是实际被点击的元素：

• 点击button空白区域时，e.target就是button元素，它带有data-id属性，所以能正常获取ID并执行切换；
• 点击button内的<img>或<h3>时，e.target变成了这些子元素，它们没有data-id属性，导致id值为undefined，后续切换逻辑不会执行。

不需要替换为div标签，修改JS代码即可解决 #

可以用Element.closest()方法，从点击的元素向上查找最近的.tab-button元素，这样不管点击button内的哪个子元素，都能定位到对应的button，获取正确的data-id。

修改后的JavaScript代码：

const wmButton = document.querySelector("button");
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".content");
const wmWhiteBg = document.querySelector(".workmarket-active-bg");

if (tabs) {
  tabs.onclick = (e) => {
    // 找到最近的.tab-button元素
    const targetButton = e.target.closest(".tab-button");
    if (targetButton) {
      const id = targetButton.dataset.id;
      
      // 移除所有button的active类
      tabButton.forEach((btn) => {
        btn.classList.remove("active");
      });
      // 给当前button添加active类
      targetButton.classList.add("active");

      // 切换内容显示
      contents.forEach((content) => {
        content.classList.remove("active");
      });
      const element = document.getElementById(id);
      element.classList.add("active");
    }
  };
}

额外优化说明 #

• 原来的tabButton选择器包含了.toggle-text和.toggle-img，现在可以简化为只选中.tab-button，因为我们只需要给button添加/移除active类；
• closest()方法会从当前元素开始向上遍历DOM树，直到找到匹配选择器的元素，现代浏览器均支持该方法。

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