案例2：JavaScript 网页交互——点击按钮实现页面切换
案例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秒，添加从左到右的滑动过渡效果”，重新生成代码即可；
- 若需要添加“页面标题动画”，可补充需求“页面标题添加淡入动画，切换页面时标题缓慢显示”，重新生成代码。