如何操作浏览器历史记录并捕获浏览器后退/前进按钮？

Question

我已经搜索了几个小时，试图进行简单的浏览器历史操作。

我有几个菜单链接，我将点击处理程序绑定到它们。链接的 href 只是哈希：href="#Home" 或 href="#About"。

我想在用户点击链接时显示一个子页面，而不需要重新加载页面和更改浏览器网址。

我也用 pushState() 尝试了这个基本示例，但它不起作用： http://jsbin.com/wecubizovu/1/edit?html,js,console

http://jsbin.com/wecubizovu

当我在 Chrome 中运行它时，我希望，如果用户点击链接，他会在 url 上附加 #asd 并且 popstate 不会改变。为什么会触发 popstate？如何做到这一点，以便当用户单击链接时，我将哈希附加到浏览器 url，当用户单击浏览器后退按钮时，我捕获该事件并显示我想要的页面？

谢谢！

Answer 1

您的a 元素有一个href 或''，如果您不阻止默认操作，它仍会执行，这会以某种方式弄乱您想要执行的操作。 将您的功能更改为

$("#asd").click(function(e) {
  e.preventDefault();
  alert("jo");
  window.history.pushState("", document.title, "#asd");
});

实现您的目标。

编辑：链接：http://jsbin.com/sosozeteti

http://jsbin.com/sosozeteti/1/edit?html,js