纯HTML原型侧边栏单选切换内容失效问题求助

1. 先查HTML结构的坑 #

• 所有内容区块初始状态得设为隐藏，用style="display: none;"，只给默认选中的区块设置display: block;
• 单选按钮必须设置相同的name属性（比如name="tabGroup"），不然多个单选按钮能同时选中，根本没法实现切换逻辑
• 每个单选按钮要和对应内容区块绑定标识，比如给单选按钮加data-target="content1"，对应区块设id="content1"，方便JS快速定位目标

2. 再看JavaScript逻辑问题 #

• 优先监听单选按钮的change事件（比click更靠谱，键盘切换也能触发）
• 事件处理逻辑要先把所有内容区块隐藏，再显示当前选中的目标区块
• 给你个可直接复用的示例代码：

<!-- 侧边栏单选按钮 -->
<div class="sidebar">
  <label><input type="radio" name="tabGroup" data-target="content1" checked> 内容1</label>
  <label><input type="radio" name="tabGroup" data-target="content2"> 内容2</label>
  <label><input type="radio" name="tabGroup" data-target="content3"> 内容3</label>
</div>

<!-- 内容区块 -->
<div class="content-wrap">
  <div id="content1" style="display: block;">这是内容1的展示区域</div>
  <div id="content2" style="display: none;">这是内容2的展示区域</div>
  <div id="content3" style="display: none;">这是内容3的展示区域</div>
</div>

<script>
// 获取所有单选按钮和内容区块
const tabs = document.querySelectorAll('input[name="tabGroup"]');
const contents = document.querySelectorAll('.content-wrap > div');

// 给每个单选按钮绑定切换事件
tabs.forEach(tab => {
  tab.addEventListener('change', () => {
    // 先隐藏所有内容区块
    contents.forEach(item => item.style.display = 'none');
    // 显示当前选中的目标内容
    document.getElementById(tab.dataset.target).style.display = 'block';
  });
});
</script>

3. 最容易踩的几个错误 #

• 单选按钮未设置相同name：无法实现互斥选中，切换逻辑直接失效
• 内容区块初始未隐藏：页面加载时所有内容同时显示
• JS脚本放在HTML元素之前：DOM还未加载完成，无法获取元素导致事件绑定失败（解决方法：把脚本放在</body>标签前，或者用DOMContentLoaded包裹逻辑）
• 标识拼写错误：比如data-target写的是content1，但区块id是cont1，JS找不到目标元素

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