登录双页面切换html
时间: 2023-07-25 19:24:19 浏览: 47
好的,下面是一个简单的双页面切换的 HTML 代码示例,你可以参考一下:
```html
<!DOCTYPE html>
<html>
<head>
<title>双页面切换</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f2f2f2;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #3e8e41;
}
.page1 {
display: block;
}
.page2 {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="page1">
<h1>页面1</h1>
<p>这是第一个页面</p>
<button class="btn" onclick="showPage2()">切换到页面2</button>
</div>
<div class="page2">
<h1>页面2</h1>
<p>这是第二个页面</p>
<button class="btn" onclick="showPage1()">返回页面1</button>
</div>
</div>
<script type="text/javascript">
function showPage2() {
document.querySelector('.page1').style.display = 'none';
document.querySelector('.page2').style.display = 'block';
}
function showPage1() {
document.querySelector('.page2').style.display = 'none';
document.querySelector('.page1').style.display = 'block';
}
</script>
</body>
</html>
```
在这个示例中,我们定义了两个页面,分别是 `.page1` 和 `.page2`,并且使用了 `display: none` 和 `display: block` 来控制这两个页面的显示和隐藏。在页面中,我们使用了两个按钮来切换页面,分别是 `切换到页面2` 和 `返回页面1`,并且分别绑定了 `showPage2()` 和 `showPage1()` 两个函数。这两个函数分别用来控制页面的显示和隐藏,具体实现就是通过 JavaScript 的 `querySelector()` 方法来找到对应的页面元素,并且设置其 `style.display` 属性来改变其显示状态。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://img-home.csdnimg.cn/images/20210720083646.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)