用js写一个简单的网页切换
时间: 2023-12-14 20:02:02 浏览: 37
好的,你可以尝试一下下面的代码,它实现了一个简单的网页切换效果:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页切换</title>
<style>
.page {
display: none;
}
.page.active {
display: block;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div class="page active" id="page1">
<h1>页面1</h1>
<p>这是第一个页面的内容。</p>
</div>
<div class="page" id="page2">
<h1>页面2</h1>
<p>这是第二个页面的内容。</p>
</div>
<div class="page" id="page3">
<h1>页面3</h1>
<p>这是第三个页面的内容。</p>
</div>
<button onclick="showPage(1)">第1页</button>
<button onclick="showPage(2)">第2页</button>
<button onclick="showPage(3)">第3页</button>
<script>
function showPage(num) {
// 隐藏所有页面
var pages = document.querySelectorAll('.page');
for (var i = 0; i < pages.length; i++) {
pages[i].classList.remove('active');
}
// 显示指定页面
var page = document.querySelector('#page' + num);
page.classList.add('active');
}
</script>
</body>
</html>
```
这个网页中有三个页面,它们分别用 `div` 元素表示,并且都设置了 `class="page"` 属性。其中,第一个页面默认是显示的,其他页面都是隐藏的。
网页中还有三个按钮,用于切换到不同的页面。当点击按钮时,就会调用 `showPage()` 函数,这个函数接收一个参数 `num`,表示要切换到第几个页面。
在 `showPage()` 函数中,首先使用 `document.querySelectorAll('.page')` 获取所有的页面元素,然后遍历这些元素,并且从它们的 `class` 属性中移除 `active`。这样,所有页面就都被隐藏了。
接着,使用 `document.querySelector('#page' + num)` 获取要显示的页面元素,并且给它的 `class` 属性添加 `active`。这样,这个页面就会显示出来了。
注意,我们在 CSS 中定义了两个选择器 `.page` 和 `.page.active`,分别表示所有页面和当前页面。其中,`.page` 的 `display` 属性被设置为 `none`,这样这些页面就被隐藏了。而 `.page.active` 的 `display` 属性被设置为 `block`,这样当前页面就会显示出来。