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);
 }
};

此处是指向该页面的工作版本的链接，如果您单击“输入”按钮，则单击其中一个图标，您将看到它正在运行。任何帮助是极大的赞赏。谢谢！ 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

jQuery简单的历史解决方案，适用于div＆＃39; open＆＃39;或者＆＃39;关闭＆＃39;州

1 个答案: