怎样实现点击按钮上下页面替换功能,我需要代码
时间: 2023-03-30 18:03:11 浏览: 53
您可以使用 JavaScript 来实现点击按钮上下页面替换功能,以下是一个简单的示例代码:
HTML 代码:
```
<button onclick="changePage()">点击切换页面</button>
<div id="page1">这是第一页</div>
<div id="page2" style="display:none">这是第二页</div>
```
JavaScript 代码:
```
function changePage() {
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
if (page1.style.display === "none") {
page1.style.display = "block";
page2.style.display = "none";
} else {
page1.style.display = "none";
page2.style.display = "block";
}
}
```
当用户点击按钮时,`changePage()` 函数会被调用。该函数首先获取页面中的两个 `<div>` 元素,然后检查第一个元素的 `display` 属性是否为 "none"。如果是,则将第一个元素的 `display` 属性设置为 "block",将第二个元素的 `display` 属性设置为 "none",从而显示第一页并隐藏第二页。如果第一个元素的 `display` 属性不是 "none",则将两个元素的 `display` 属性互换,从而显示第二页并隐藏第一页。
希望这个示例代码能够帮助您实现您的需求!