0

我有一个使用简单机制构建的项目，当单击一组图标链接时，一个 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

更新：客户很高兴只需在新选项卡中打开链接 - 因此绕过了将哈希用于历史目的的需要。但是，这里的所有评论和答案都有助于指向一个解决方案，我可能会自己尝试一下，以便我可以吸收这个概念，看看我是否可以让它发挥作用。谢谢！

4

1 回答 1

1

不确定代码的细节，但挂钩到窗口历史记录是一项相对简单的任务。您可以使用哈希（网址 # 之后的所有内容）来制定您的逻辑。

非常简单的解决方案：

<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

于 2012-12-03T16:32:31.500 回答