如何用js将一个页面隐藏,另一个页面显示
时间: 2024-02-20 18:56:46 浏览: 27
你可以使用 JavaScript 中的 DOM 操作来实现页面的隐藏和显示。具体操作如下:
1. 获取需要显示和隐藏的页面元素
```js
const hidePage = document.getElementById('hide-page');
const showPage = document.getElementById('show-page');
```
2. 给元素设置样式,实现隐藏和显示
```js
hidePage.style.display = 'none'; // 隐藏元素
showPage.style.display = 'block'; // 显示元素
```
完整的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面切换</title>
</head>
<body>
<div id="hide-page">
<h1>隐藏的页面</h1>
</div>
<div id="show-page" style="display: none;">
<h1>显示的页面</h1>
</div>
<button onclick="switchPage()">切换页面</button>
<script>
function switchPage() {
const hidePage = document.getElementById('hide-page');
const showPage = document.getElementById('show-page');
hidePage.style.display = 'none';
showPage.style.display = 'block';
}
</script>
</body>
</html>
```
当点击按钮时,会隐藏 `hide-page` 元素,显示 `show-page` 元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)