如何通过点击单选按钮切换显示网站的隐藏内容

纯CSS方案（无需JavaScript） #

这种方案最简洁，靠CSS原生特性就能实现需求，不用额外写脚本。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选按钮切换内容显示</title>
    <style>
        /* 初始隐藏两个内容块 */
        .hidden_part_1, .hidden_part_2 {
            display: none;
        }

        /* 选中Option1时，显示第一个内容块、隐藏第二个 */
        #option_1:checked ~ .hidden_part_1 {
            display: block;
        }
        #option_1:checked ~ .hidden_part_2 {
            display: none;
        }

        /* 选中Option2时，显示第二个内容块、隐藏第一个 */
        #option_2:checked ~ .hidden_part_2 {
            display: block;
        }
        #option_2:checked ~ .hidden_part_1 {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 单选按钮组 -->
    <input type="radio" id="option_1" name="options" value="option_1" checked>
    <label for="option_1">Option 1</label><br>
    <input type="radio" id="option_2" name="options" value="option_2">
    <label for="option_2">Option 2</label><br><br>
    
    <!-- 内容块1 -->
    <div class="hidden_part_1">选中Option1时显示这段内容</div>
    
    <!-- 内容块2 -->
    <div class="hidden_part_2">选中Option2时显示这段内容</div>
</body>
</html>

关键说明：

• 用display: none替代原代码的hidden属性，控制初始隐藏状态，样式调整更灵活
• :checked伪类捕获单选按钮的选中状态
• 通用兄弟选择器~关联选中状态和对应内容块，要求单选按钮和内容块在同一父元素下
• 给option_1加checked属性，页面加载时默认显示第一个内容块

JavaScript方案（适合复杂场景） #

如果内容块和单选按钮不在同一层级，或者需要更复杂的逻辑，用JavaScript实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选按钮切换内容显示</title>
    <style>
        .hidden_part_1, .hidden_part_2 {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 单选按钮组 -->
    <input type="radio" id="option_1" name="options" value="option_1" checked>
    <label for="option_1">Option 1</label><br>
    <input type="radio" id="option_2" name="options" value="option_2">
    <label for="option_2">Option 2</label><br><br>
    
    <!-- 内容块1 -->
    <div class="hidden_part_1">选中Option1时显示这段内容</div>
    
    <!-- 内容块2 -->
    <div class="hidden_part_2">选中Option2时显示这段内容</div>

    <script>
        // 获取DOM元素
        const radioButtons = document.querySelectorAll('input[name="options"]');
        const part1 = document.querySelector('.hidden_part_1');
        const part2 = document.querySelector('.hidden_part_2');

        // 初始显示第一个内容块
        part1.style.display = 'block';

        // 监听单选按钮切换事件
        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'option_1') {
                    part1.style.display = 'block';
                    part2.style.display = 'none';
                } else if (this.value === 'option_2') {
                    part1.style.display = 'none';
                    part2.style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>

关键说明：

• 通过querySelector获取目标DOM元素
• 给每个单选按钮绑定change事件，切换时修改内容块的display属性
• 手动设置初始显示状态，确保页面加载后有内容展示

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