gpt4 book ai didi

javascript - 从基于哈希的导航切换到 HTML5 History API

转载 作者:行者123 更新时间:2023-11-28 07:03:05 26 4
gpt4 key购买 nike

我正在尝试了解如何为我的网页使用 History API。目前,它是一个简单的页面,导航栏通过将 ID 的 display 更改为 noneblock 来切换内容可见性。

由于浏览器后退按钮内存,我想切换到 History API,但我发现的所有示例都使用 AJAX 在单击时从单独的文件加载数据。我的页面不够大,无法保证异步加载。

有没有办法让常规 URL 像哈希一样触发 CSS 属性更改?

最佳答案

不,CSS 只能对 :target 使用react通过 URL 的哈希组件。但是,如果您愿意,您仍然可以利用 History API;您只需要一点额外的 javascript。例如你可以 data-target属性为 <html>根据 URL 变化的元素,然后您的 css 可以通过类似的方式对此使用react:

[data-target="home"] #home-page { display: block; }

History API 允许您为每个条目存储一些状态,因此您可以使用它来存储目标标识符,然后在您的“popstate”处理程序中再次检索它 - 例如

history.pushState({ target: 'home' }, '', '/home')
document.documentElement.dataset.target = 'home'
window.addEventListener('popstate', function (e) {
document.documentElement.dataset.target = e.state.target
})

关于javascript - 从基于哈希的导航切换到 HTML5 History API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33114965/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com