后退按钮上的 jQuery 动画答案

【问题标题】：jQuery animations on back button后退按钮上的 jQuery 动画
【发布时间】：2016-03-03 12:53:50
【问题描述】：

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

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

有人有解决办法吗？

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

【问题讨论】：

你能用相关的css和html代码创建一个sn-p吗？
发布代码或小提琴
pain of browser back button的可能重复
jsfiddle.net/hqkyxz3w/2 这是一个基本演示...一旦显示第 1 页，我想在单击后退按钮时将其隐藏...但是警报占位符适用于初始位置更改，而不是回去的时候..

标签： javascript jquery html css

【解决方案1】：

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

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

将location.hash 更改为您想要的任何内容。
调用window.history.pushState() 将状态添加到浏览器历史记录。请参阅https://developer.mozilla.org/en-US/docs/Web/API/History_API 了解更详细的说明它需要哪些参数。
调用隐藏/显示相应选项卡的函数。

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

查看这个答案如何监听哈希变化事件：On - window.location.hash - Change?
检查当前哈希并调用上一段中第 3 点中隐藏/显示选项卡的相同函数。

【讨论】：

网站上实际上没有链接，一切都在 index.html 上。所以没有通过 href 重定向到某个页面（没有 #page1）。标签内容随着点击而改变在具有某些 ID 或类的 div 上。单击徽标的行为相同。考虑到我们还有解决方案吗？
没关系。您不想将用户重定向到任何地方，您只想更改 URL 的哈希值，以便能够使用浏览器的后退/前进按钮进行导航。这是功能与您使用的元素、ID、类无关。您将使用不同的哈希值来恢复标签状态。
谢谢.. 所以我现在有这个：jsfiddle.net/hqkyxz3w/1 如何添加功能以在后退按钮上隐藏#page1？
jsfiddle.net/hqkyxz3w/2 实际上，当我单击选项卡时，这会调用警报，但是在您点击后退按钮而不是所有其他按钮后它应该可以工作..

【解决方案2】：

这是半工作版本...我使用 location.hash 和 history.pushState 在单击选项卡时对其进行更改，然后单击 window.onpopstate 以隐藏页面..

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

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

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

$("#tab1").click(function(){
location.hash = 'something';
history.pushState({extraData: "something"}, '', 'new-hash'); 

    $("#page1").show();
});

$("#logo").click(function(){
    $("#page1").hide();
});

window.onpopstate = function() {
alert('How to exclude it on clicking page one?');
$("#page1").hide();
 };

【讨论】：