如何将三个JavaScript按钮的切换函数简化为单个函数

嘿，这个需求很典型，咱们完全可以用数据属性+通用函数的方式，把三个重复的函数合并成一个，还能让按钮和对应内容的关联更清晰！下面给你两种可行的实现方式：

方式一：直接绑定按钮点击事件（简单直观） #

首先修改你的HTML，给每个按钮添加一个data-target属性，值就是对应内容div的ID，同时把所有按钮的onclick统一调用同一个函数：

<button onclick="toggleContent(this)" data-target="ContentOne">Button 1</button>
<button onclick="toggleContent(this)" data-target="ContentTwo">Button 2</button>
<button onclick="toggleContent(this)" data-target="ContentThree">Button 3</button>

<!-- 给内容div统一加个类，方便控制样式，默认隐藏除第一个外的内容 -->
<div id="ContentOne" class="content">This is Content One.</div>
<div id="ContentTwo" class="content hidden">This is Content Two.</div>
<div id="ContentThree" class="content hidden">This is Content Three.</div>

然后加一点CSS来控制隐藏状态：

.hidden {
  display: none;
}

最后写这个通用的JavaScript函数：

function toggleContent(button) {
  // 从按钮的data-target属性里拿到对应内容的ID
  const targetId = button.getAttribute('data-target');
  // 找到对应的内容div
  const targetContent = document.getElementById(targetId);
  
  // 切换"hidden"类，实现显示/隐藏的切换
  targetContent.classList.toggle('hidden');
  
  // 👉 如果你需要实现"点击一个按钮，其他内容自动隐藏"的排他效果，就把下面这段注释去掉
  // const allContents = document.querySelectorAll('.content');
  // allContents.forEach(content => {
  //   if (content.id !== targetId) {
  //     content.classList.add('hidden');
  //   }
  // });
}

为什么这么做？ #

• data-target相当于给按钮和内容div建立了“绑定关系”，不用再写三个重复的函数，逻辑更清晰。
• 用classList.toggle()比直接操作style.display更灵活，后续如果要改隐藏的样式（比如加过渡动画），直接改CSS就行，不用动JS。

方式二：事件委托（更优雅，支持动态按钮） #

如果你的按钮可能是动态生成的（比如后续通过JS添加新按钮），用事件委托会更合适——不用给每个按钮单独绑定点击事件，只需要给它们的父容器加一个监听：

修改HTML，把按钮放在一个容器里：

<div class="button-group">
  <button data-target="ContentOne">Button 1</button>
  <button data-target="ContentTwo">Button 2</button>
  <button data-target="ContentThree">Button 3</button>
</div>

<div id="ContentOne" class="content">This is Content One.</div>
<div id="ContentTwo" class="content hidden">This is Content Two.</div>
<div id="ContentThree" class="content hidden">This is Content Three.</div>

CSS和上面一样，然后JS改成这样：

// 给按钮容器添加点击监听
document.querySelector('.button-group').addEventListener('click', function(e) {
  // 确保点击的是按钮元素
  if (e.target.tagName === 'BUTTON') {
    const targetId = e.target.getAttribute('data-target');
    const targetContent = document.getElementById(targetId);
    
    // 切换显示状态
    targetContent.classList.toggle('hidden');
    
    // 同样，排他效果可以去掉下面的注释
    // document.querySelectorAll('.content').forEach(content => {
    //   if (content.id !== targetId) {
    //     content.classList.add('hidden');
    //   }
    // });
  }
});

这种方式的好处： #

• 后续不管加多少新按钮，只要有data-target属性，就能自动触发切换逻辑，不用再写额外的绑定代码。
• 减少了DOM事件绑定的数量，性能更优。

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