Javascript 从基于哈希的nav切换到HTML5历史API

我正在尝试找出如何在我的网页上使用历史API。目前，它是一个简单的页面，导航栏通过将ID的显示更改为“无”或“块”，在单击时切换内容可见性

---

我想切换到历史API，因为浏览器返回按钮内存，但我发现的所有示例都使用AJAX从单独的文件中单击加载数据。我的页面不够大，无法保证异步加载

常规URL有没有办法像哈希那样触发CSS属性更改？

没有，CSS只能通过URL的哈希组件对：target做出反应。但是，如果愿意，您仍然可以利用历史API；您只需要添加一点javascript。例如，您可以为元素添加一个数据目标属性，该属性根据URL的不同而变化，然后您的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
})

---

我想切换到历史API，因为浏览器后退按钮内存也不会在浏览器历史记录中记录哈希更改？您指的是什么CSS属性更改？@BoltClock后退按钮是否仍然可以处理哈希？我不知道。我可以查看它。@dandavis目前我正在通过将display:none更改为display:block来显示/隐藏内容，反之亦然。