后退按钮上的jQuery动画

Question

我有一个页面，通过jQuery show/hide函数访问多个选项卡（子页面）。当单击徽标时，所有其他选项卡都将被隐藏，并显示第一个选项卡。

我想将与$("#logo").click()相同的显示/隐藏流程附加到后退按钮。当有人点击浏览器的后退按钮时，应该阻止默认操作，并且应该激活显示/隐藏组合以显示第一个选项卡。

有没有人有解决方案？

window.onbeforeunload函数不起作用... https://jsfiddle.net/hqkyxz3w/3/

Answer 1

这通常使用网址的哈希（即#）和window.history.pushState()方法之后的所有内容来完成。

当用户点击标签/徽标时：

1. 将location.hash更改为您想要的任何内容。
2. 致电window.history.pushState()以向浏览器历史记录添加状态。有关所需参数的更详细说明，请参阅https://developer.mozilla.org/en-US/docs/Web/API/History_API。
3. 调用隐藏/显示相应标签的功能。

然后，当您按下浏览器的后退按钮时，您希望更改选项卡，这样您就需要知道URL的哈希值何时发生了变化。

1. 请参阅此答案如何收听哈希更改事件：On - window.location.hash - Change?
2. 检查当前哈希，并从上一段隐藏/显示标签的项目符号3中调用相同的函数。

Answer 2

这是半工作版本...我已经使用location.hash和history.pushState在单击选项卡上更改它，然后使用window.onpopstate来隐藏页面..

https://jsfiddle.net/hqkyxz3w/4/

问题仍然存在，因为onpopstate在单击选项卡时也会触发，而不仅仅是在点击按钮时..这是示例：

https://jsfiddle.net/hqkyxz3w/5/

cartv