j查询 div 的"打开"或"关闭"状态的简单历史记录解决方案

Question

我构建了一个项目，该项目使用了一种简单的机制，当单击一组图标链接时，div层会在内容区域中设置动画，然后要求用户单击"关闭"按钮来反向设置div的动画，这意味着将不透明度设置为0并滑出视图。

div为"open"时，会有指向外部页面(标记为"GO")的链接。目前，我在一个新的选项卡/窗口中打开了它们。但是，客户端更希望，如果您访问外部页面链接，然后单击浏览器返回按钮，div将保持"打开"状态。

有人知道一种相对简单的方法吗？不用完全重新设计我的构建方式？还是它需要某种高级插件和完全的代码返工？

打开div的jQuery在这里：

var triggerPanels = function(){
for(i=1; i <= 9; i++){
(function(e) {
var trigger = $("#iconTrig" + i);
var panel = $("#pane" + i);
$(trigger).click(function(){
$(panel).animate({
right: 0, opacity: 1
}, 500 );
return false;
});
})(i);
}
};

指向该页面工作版本的链接就在这里，如果你单击Enter按钮，然后单击其中一个图标，你就会看到它在运行。非常感谢您的帮助。谢谢http://dev.seanchristiandampier.com/asia-timber/index-dev-new.html

更新：客户端很乐意简单地在一个新的选项卡中打开链接，这样就不需要将哈希用于历史记录了。然而，这里的所有评论和答案都有助于找到一个解决方案，我可以自己尝试一下，这样我就可以吸收这个概念，看看我是否能让它发挥作用。谢谢

Answer 1

不确定代码的实质，但挂钩到窗口历史记录是一项相对简单的任务。您可以使用散列(url的#之后的所有内容)来计算您的逻辑。

非常简单的解决方案：

<div class="div">TheColor</div>
<a href="#blue">Blue</a>
<a href="#red">Red</a>​

然后使用jQuery：

//capture the hash change event and do what you want with the window hash.
$(window).on('hashchange',function(e){
$('.div').css('background-color',window.location.hash.replace('#',''));
});
//Used to trigger the above event if someone links to the page with the hash set already.
$(window).trigger('hashchange');

工作示例(您看不到哈希，因为jsFiddle使用Iframe，但尝试单击浏览器上的按钮和后退按钮)：jsFiddle