如何仅更改此单选按钮更改此div选项卡

要实现仅通过更改单选按钮来切换 div 选项卡的功能，你可以使用 JavaScript（或 jQuery）来监听单选按钮的变化，并根据所选按钮的值来显示或隐藏相应的 div 选项卡。以下是一个简单的示例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Switching with Radio Buttons</title>
    <style>
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <input type="radio" name="tab" id="tab1" value="tab1" checked>
        <label for="tab1">Tab 1</label>
        <input type="radio" name="tab" id="tab2" value="tab2">
        <label for="tab2">Tab 2</label>
    </div>
    <div id="tab1" class="tab-content active">
        <h2>Content for Tab 1</h2>
        <p>This is the content for Tab 1.</p>
    </div>
    <div id="tab2" class="tab-content">
        <h2>Content for Tab 2</h2>
        <p>This is the content for Tab 2.</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('input[name="tab"]');
            const tabContents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('change', function() {
                    // Hide all tab contents
                    tabContents.forEach(content => content.classList.remove('active'));

                    // Show the selected tab content
                    const selectedTab = document.getElementById(this.value);
                    if (selectedTab) {
                        selectedTab.classList.add('active');
                    }
                });
            });
        });
    </script>
</body>
</html>

解释

HTML 结构:
- 使用两个单选按钮来表示两个选项卡。
- 每个选项卡对应一个 div 元素，初始状态下只有一个 div 是可见的（通过 active 类控制）。

CSS 样式:
- .tab-content 类用于隐藏所有选项卡内容。
- .tab-content.active 类用于显示当前选中的选项卡内容。
JavaScript 逻辑:
- 在文档加载完成后，为每个单选按钮添加 change 事件监听器。
- 当单选按钮的值改变时，首先移除所有选项卡内容的 active 类，然后根据当前选中的单选按钮的值添加 active 类到相应的选项卡内容上。