多按钮Hide/Show切换异常：仅需切换对应内容（Javascript）

你的代码存在的核心问题 #

• 函数重复定义导致覆盖：你写了三个同名的myFunction函数，JavaScript里同名函数会被最后一个完全覆盖，所以不管点哪个按钮，实际执行的都是最后一个函数（操作r2-container），这就是所有按钮都控制同一内容的原因。
• 函数参数语法错误：函数定义时不能给参数加引号，比如function myFunction('div1')是错误写法，正确应该用参数名（比如targetId），引号会直接导致函数无法正常运行。
• 元素ID完全不匹配：按钮点击时传的是div1/div2/div3，但函数里找的是d4-container/d2-container/r2-container，浏览器找不到对应元素，自然点击后没内容显示。
• HTML结构错误：每个按钮和内容都套了<body>标签，一个网页只能有一个<body>，重复标签会让浏览器解析混乱，进一步导致元素获取失败。

适合零基础的修复方案 #

修复后的完整代码（直接在Elementor的HTML模块中使用） #

<!-- 所有按钮和对应内容放在一起，无需重复<body>标签 -->
<button id="d4btn" onclick="toggleContent('div1')">Text</button>
<div id="div1" style="display:none;">这里替换成Text对应的内容</div>
<p></p>

<button id="d2btn" onclick="toggleContent('div2')">Text2</button>
<div id="div2" style="display:none;">这里替换成Text2对应的内容</div>
<p></p>

<button id="r2btn" onclick="toggleContent('div3')">Text3</button>
<div id="div3" style="display:none;">这里替换成Text3对应的内容</div>
<p></p>

<script>
// 只写一个通用切换函数，接收要操作的元素ID作为参数
function toggleContent(targetId) {
  // 根据传入的ID找到对应的内容容器
  var targetDiv = document.getElementById(targetId);
  // 判断当前显示状态，切换显示/隐藏
  if (targetDiv.style.display === "none") {
    targetDiv.style.display = "block";
  } else {
    targetDiv.style.display = "none";
  }
}
</script>

Elementor操作步骤 #

1. 在页面编辑界面添加「HTML」模块；
2. 把上面的代码复制粘贴到模块中；
3. 替换代码里的内容占位符为你实际要显示的文字/内容；
4. 保存并预览页面，点击按钮即可实现对应内容的独立切换。

可选优化 #

• 如果想让内容默认显示，删掉对应<div>里的style="display:none;"即可；
• 若想用Elementor自带的样式按钮，可先添加Elementor按钮模块，再在按钮的「高级」选项中添加onclick="toggleContent('div1')"点击事件（需确保对应的<div>ID匹配）。

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