Question

我试图弄清楚如何在我的网页上使用History API。目前，它是一个简单的页面，其中导航栏通过将ID display更改为none或block来切换点击内容的可见性。

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

常规网址是否有办法以哈希的方式触发CSS属性更改？

Answer 1

不，CSS只能通过URL的哈希组件对:target作出反应。但是，如果您愿意，您仍然可以利用History API;你只需要一些额外的javascript。例如，data-target元素的<html>属性可能会根据网址发生变化，然后您的css可以通过以下方式对此做出反应：

[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
})

从基于散列的导航切换到HTML5 History API

1 个答案: