点击Div1内按钮切换显示Div2（无页面刷新跳转）求实现代码

嘿，这个需求很常见，用原生HTML+JavaScript就能完美实现，全程无页面刷新和跳转。我给你准备了完整的可运行代码，每一步都加了注释，你直接复制就能用～

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Div切换示例</title>
    <style>
        /* 默认显示Div1，隐藏Div2 */
        #Div1 {
            padding: 20px;
            background-color: #f0f8ff;
            border: 1px solid #ccc;
        }
        #Div2 {
            display: none; /* 初始隐藏 */
            padding: 20px;
            background-color: #fff8dc;
            border: 1px solid #ccc;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Div1：页面加载后自动显示 -->
    <div id="Div1">
        <h3>这是Div1</h3>
        <p>点击下方按钮切换到Div2</p>
        <button id="switchBtn">切换到Div2</button>
    </div>

    <!-- Div2：初始隐藏，点击按钮后显示 -->
    <div id="Div2">
        <h3>这是Div2</h3>
        <p>Div1已经被完全移除啦！</p>
    </div>

    <script>
        // 页面加载完成后执行（其实Div1默认就是显示的，这里可做初始化操作）
        window.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，Div1已显示');
        });

        // 获取切换按钮和两个Div元素
        const switchBtn = document.getElementById('switchBtn');
        const div1 = document.getElementById('Div1');
        const div2 = document.getElementById('Div2');

        // 给按钮绑定点击事件
        switchBtn.addEventListener('click', function() {
            // 完全移除Div1（从DOM树中彻底删除）
            div1.remove();
            // 显示Div2
            div2.style.display = 'block';
        });
    </script>
</body>
</html>

• 初始状态控制：通过CSS的display: none让Div2默认隐藏，Div1默认显示，刚好满足“页面加载完成后Div1自动显示”的要求。
• 无刷新切换：使用原生事件绑定处理点击逻辑，全程在前端操作DOM，完全不会触发页面刷新或跳转。
• 完全移除Div1：调用DOM元素的remove()方法，会把Div1从DOM树中彻底删除，而不是仅仅隐藏起来。
• 兼容性：所有API都是原生标准，支持几乎所有现代浏览器，不用依赖任何第三方框架。

如果需要调整样式或者扩展功能，直接修改对应的CSS或JS部分就可以啦～

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