请创建两个页面,通过按钮来相互切换
时间: 2023-09-18 21:15:54 浏览: 55
好的,我可以帮你实现这个功能。你可以参考下面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换页面</title>
<style>
/* 设置页面样式 */
#page1, #page2 {
display: none;
width: 100%;
height: 100vh;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #333;
}
#page1 {
background-color: #ffc107;
}
#page2 {
background-color: #2196f3;
}
button {
margin-top: 20px;
font-size: 16px;
font-weight: normal;
color: #fff;
background-color: #333;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 第一个页面 -->
<div id="page1">
<h1>这是第一页</h1>
<button onclick="showPage(2)">切换到第二页</button>
</div>
<!-- 第二个页面 -->
<div id="page2">
<h1>这是第二页</h1>
<button onclick="showPage(1)">切换到第一页</button>
</div>
<!-- JavaScript代码 -->
<script>
// 定义一个函数来切换页面
function showPage(page) {
if (page === 1) {
document.getElementById("page1").style.display = "block";
document.getElementById("page2").style.display = "none";
} else if (page === 2) {
document.getElementById("page1").style.display = "none";
document.getElementById("page2").style.display = "block";
}
}
</script>
</body>
</html>
```
这段代码实现了两个页面的切换,第一个页面是黄色背景,第二个页面是蓝色背景。每个页面都有一个按钮,点击按钮可以切换到另一个页面。在 HTML 中,我们使用了 `div` 元素来创建两个页面。在 CSS 中,我们设置了页面的样式,包括背景颜色、文本样式和按钮样式。在 JavaScript 中,我们定义了一个函数 `showPage` 来切换页面,根据传入的参数来显示或隐藏对应的页面。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)