设计一个网页, 包含两个页面. 可通过点击按钮翻页, 第一页名为"页面1", 第二页名为"页面2"
<!DOCTYPE html>
<html>
<head>
<title>页面切换</title>
<style>
/* CSS: 定义类名为page的元素样式 */
.page {
/* CSS: 默认隐藏.page元素 */
display: none;
}
/* CSS: 定义类名为active的元素样式 */
.active {
/* CSS: 显示.active元素 */
display: block;
}
</style>
</head>
<body>
<!-- HTML: div标签，id为page1，类名为page和active -->
<div id="page1" class="page active">
<!-- HTML: h1标签，显示标题“页面1” -->
<h1>页面1</h1>
<!-- HTML & JS: button标签，点击时调用switchPage函数切换到page2 -->
<button onclick="switchPage('page2')">下一页</button>
</div>
<!-- HTML: div标签，id为page2，类名为page -->
<div id="page2" class="page">
<!-- HTML: h1标签，显示标题“页面2” -->
<h1>页面2</h1>
<!-- HTML & JS: button标签，点击时调用switchPage函数切换到page1 -->
<button onclick="switchPage('page1')">上一页</button>
</div>
<script>
/* JS: 定义函数switchPage, 参数为pageId */
function switchPage(pageId) {
/* JS: 找到当前.active元素并移除.active类名 */
document.querySelector('.active').classList.remove('active');
/* JS: 找到id为pageId的元素并添加.active类名 */
document.getElementById(pageId).classList.add('active');
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>页面切换</title>
<style>
.page {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div id="page1" class="page active">
<h1>页面1</h1>
<button onclick="switchPage('page2')">下一页</button>
</div>
<div id="page2" class="page">
<h1>页面2</h1>
<button onclick="switchPage('page1')">上一页</button>
</div>
<script>
function switchPage(pageId) {
document.querySelector('.active').classList.remove('active');
document.getElementById(pageId).classList.add('active');
}
</script>
</body>
</html>
