hashchange事件 实现一个多页面切换效果
时间: 2023-09-02 14:14:24 浏览: 48
hashchange事件可以监听 URL 中的 hash 值的变化,从而实现多页面切换效果。
具体实现步骤如下:
1. 在 HTML 文件中设置导航链接,例如:
```
<a href="#page1">Page 1</a>
<a href="#page2">Page 2</a>
<a href="#page3">Page 3</a>
```
2. 在 JavaScript 文件中添加 hashchange 事件监听器,并编写切换效果的代码,例如:
```
window.addEventListener("hashchange", function() {
var pageName = window.location.hash.substr(1); // 获取当前 hash 值
var pages = document.querySelectorAll(".page"); // 获取所有页面元素
for (var i = 0; i < pages.length; i++) {
if (pages[i].id === pageName) { // 显示当前页面
pages[i].style.display = "block";
} else { // 隐藏其他页面
pages[i].style.display = "none";
}
}
});
```
3. 在 CSS 文件中设置页面元素的样式,例如:
```
.page {
display: none;
}
```
这样,当点击导航链接时,页面就会根据 URL 中的 hash 值显示对应的页面,并触发 hashchange 事件,从而实现多页面切换效果。