如何实现点击按钮切换显示单个section并隐藏其余区块？

原代码存在的核心问题 #

• 函数作用域错误：hide()函数定义在myFunction1()内部，全局环境下调用会找不到该函数，导致隐藏逻辑根本没执行。
• HTMLCollection遍历缺失：getElementsByClassName返回的是类数组集合，不能直接给整个集合设置style.display，必须遍历每个元素操作。
• 未定义变量：hide()里的clicked变量没有声明，条件判断永远不成立，隐藏逻辑无法触发。
• 逻辑顺序错误：先执行myFunction1()显示目标区块，再执行hide()会把刚显示的区块也隐藏，完全违背需求。
• 切换逻辑不符合需求：原myFunction1()是切换目标区块的显示状态，但需求是点击按钮就固定显示对应区块、隐藏其他，不需要切换隐藏的逻辑。

修复后的完整代码示例 #

<!-- 按钮示例，每个按钮传递对应section的ID -->
<button class="button1" onclick="showSection('sec1')"></button>
<button class="button2" onclick="showSection('sec2')"></button>

<style>
.button1 {
  background-image: url("http://s910698169.onlinehome.us/wp-content/uploads/2022/07/IMGP9885.jpg"); 
  padding:65% 50%; 
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 0px;
}

/* 其他按钮样式可自行添加 */
.button2 {
  /* 自定义样式 */
}

.section {
  display: none;
}
</style>

<script>
function showSection(targetId) {
  // 1. 获取所有section区块并隐藏
  const allSections = document.getElementsByClassName('section');
  for (let section of allSections) {
    section.style.display = 'none';
  }
  
  // 2. 显示目标区块
  const targetSection = document.getElementById(targetId);
  if (targetSection) {
    targetSection.style.display = 'block';
  }
}
</script>

关键优化点说明 #

• 合并逻辑：把显示目标和隐藏其他的逻辑整合到一个函数showSection里，避免顺序错误，同时通过参数传递目标ID，复用函数，不用给每个按钮写单独的函数。
• 遍历处理集合：用for...of循环遍历所有section，逐个设置隐藏。
• 简化逻辑：去掉不必要的切换判断，点击按钮直接执行「隐藏所有→显示目标」的固定流程，完全符合需求。
• 作用域修正：把函数定义在全局作用域，确保按钮的onclick能正确调用。

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