案例2：JavaScript 网页交互——点击按钮实现页面切换

需求描述

写一个简单的网页，包含3个页面（首页、关于我们、联系我们），每个页面有对应的按钮，点击按钮可切换到对应页面，要求页面切换时有简单的过渡效果（如淡入淡出），使用HTML+CSS+JavaScript实现，代码结构清晰，附带注释，可直接在浏览器中打开运行，适配移动端（响应式布局）。

Claude 输入

“用HTML+CSS+JavaScript写一个页面切换的网页，需求如下：

包含3个页面：首页、关于我们、联系我们；
每个页面有3个按钮，点击按钮可切换到对应页面；
页面切换时有淡入淡出的过渡效果；
代码结构清晰，HTML、CSS、JavaScript分开编写，附带详细注释；
可直接在浏览器中打开运行，适配普通电脑屏幕和移动端（响应式布局）；
按钮添加 hover 效果，页面标题居中显示。”

生成代码（参考）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面切换示例</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        /* 页面容器样式 */
        .page-container {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden; /* 隐藏溢出内容 */
        }


        /* 单个页面样式 */
        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #333;
            /* 淡入淡出过渡效果 */
            transition: opacity 0.5s ease;
            opacity: 0;
            pointer-events: none; /* 隐藏时不可点击 */
            padding: 20px; /* 移动端内边距 */
        }


        /* 激活状态（当前显示的页面） */
        .page.active {
            opacity: 1;
            pointer-events: auto; /* 显示时可点击 */
        }


        /* 按钮样式 */
        .btn-group {
            display: flex;
            flex-wrap: wrap; /* 移动端自动换行 */
            justify-content: center;
            gap: 10px; /* 按钮间距 */
        }


        .btn {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s ease; /* 按钮hover过渡 */
        }


        .btn:hover {
            background-color: #45a049;
            transform: scale(1.05); /* 轻微放大效果 */
        }


        /* 页面标题样式 */
        .page h1 {
            margin-bottom: 30px;
            font-size: 32px;
            text-align: center;
        }


        /* 响应式布局：移动端适配 */
        @media (max-width: 768px) {
            .page h1 {
                font-size: 26px;
            }
            .btn {
                font-size: 16px;
                padding: 8px 16px;
            }
        }
    </style>
</head>
<body>
    <div class="page-container">
        <!-- 首页 -->
        <div class="page active" id="home">
            <h1>首页</h1>
            <div class="btn-group">
                <button class="btn" onclick="switchPage('home')">首页</button>
                <button class="btn" onclick="switchPage('about')">关于我们</button>
                <button class="btn" onclick="switchPage('contact')">联系我们</button>
            </div>
        </div>


        <!-- 关于我们 -->
        <div class="page" id="about">
            <h1>关于我们</h1>
            <div class="btn-group">
                <button class="btn" onclick="switchPage('home')">首页</button>
                <button class="btn" onclick="switchPage('about')">关于我们</button>
                <button class="btn" onclick="switchPage('contact')">联系我们</button>
            </div>
        </div>


        <!-- 联系我们 -->
        <div class="page" id="contact">
            <h1>联系我们</h1>
            <div class="btn-group">
                <button class="btn" onclick="switchPage('home')">首页</button>
                <button class="btn" onclick="switchPage('about')">关于我们</button>
                <button class="btn" onclick="switchPage('contact')">联系我们</button>
            </div>
        </div>
    </div>


    <script>
        // 页面切换函数
        function switchPage(pageId) {
            // 获取所有页面元素
            const pages = document.querySelectorAll('.page');
            // 遍历所有页面，移除active类（隐藏页面）
            pages.forEach(page => {
                page.classList.remove('active');
            });
            // 给目标页面添加active类（显示页面）
            document.getElementById(pageId).classList.add('active');
        }


        // 移动端适配：点击页面空白处不触发异常
        document.querySelector('.page-container').addEventListener('click', (e) => {
            if (e.target.classList.contains('page-container')) {
                return;
            }
        });
    </script>
</body>
</html>

效果测试与调整

将生成的代码复制到文本编辑器，保存为“page-switch.html”；
双击该文件，用浏览器打开，点击按钮，查看页面切换效果；缩小浏览器窗口，测试移动端适配效果；
若想修改过渡效果（如修改过渡时间、添加滑动效果），可回到Claude Code 输入区，补充“将页面切换的过渡时间改为0.8秒，添加从左到右的滑动过渡效果”，重新生成代码即可；
若需要添加“页面标题动画”，可补充需求“页面标题添加淡入动画，切换页面时标题缓慢显示”，重新生成代码。

案例2：JavaScript 网页交互——点击按钮实现页面切换

案例2：JavaScript 网页交互——点击按钮实现页面切换

需求描述

Claude 输入

生成代码（参考）

效果测试与调整

推荐文章

推荐教程

推荐课程