Javascript 按下后退按钮时，jQuery切换不起作用

我有以下jQuery代码：

$(function() {
    var linkSet = $('#link1').add('#link2');
    linkSet.click(function() {
    linkSet.toggle();
        if ($(this).attr('id')=='link1'){
        $('#frame').attr('src', 'www.google.com');
        } else if ($(this).attr('id')=='link2'){
        $('#frame').attr('src', 'www.yahoo.com');
        }
    });
});

在pageload上，id为

link1

的链接显示，而

link2

隐藏。当用户单击

link1

时，它将显示

link1

，然后显示

link2

，反之亦然。在进行切换时，它还会更改名为

frame

的iframe的源

我这里的问题是，当我点击“后退”按钮时，帧的内容将返回到以前的内容，但链接没有改变。我错过了什么？提前谢谢

注意：链接在一个网页上，然后在该网页内是一个iframe

编辑：

<div id="header">
<ul>
    <li><a id="link1" href=#">Link1</a>
    <li><a id="link2" href=#">Link2</a> 
</ul>
</div>
<div id="iframe">
    <iframe id="frame" src="www.google.com"></iframe>
</div>

您的意思是当按下浏览器的“后退”按钮时

如果是：

问题是您需要在历史记录更改时触发事件，因为这是响应历史记录更改的唯一简单方法（例如单击“上一步”按钮）。由于iframe url确实在更改，因此它自然也会受到back按钮的影响

要使其他非基于历史的逻辑在按下后退按钮等时工作。。。 有两种方法可以做到这一点。新的方法是使用历史API，而另一种更受支持、更简单的方法是向url添加哈希

这是什么意思

当您单击按钮时，您将使用散列更改url。就像url可以变成

''

然后，当散列更改时，您就可以执行逻辑，而不是在单击中执行逻辑。因此，当用户单击后退和/或前进时，逻辑总是完全运行

---

几个月前，我在

Don't put

$（function（）{

的

$（document.ready（function（））中写了一整篇关于这项技术的文章{

-它们做同样的事情，所以嵌套它们是不必要的/重复的任何机会都可以看到实际的页面？@agconti好吧，我没有说要使用哪一个，我只是指出嵌套它们是不必要的。但是是的，我会说，

$（文档）。ready（func…

可能“更好”…主要是因为它读起来比实际的更好。但当然，记住它们做的事情完全一样。基本上，@Gerald，你的代码很好，但它不适用于浏览器的后退和前进按钮，除非你专门为这些按钮编写代码。Andres的回答应该为你指明正确的方向，即使使用哈希最近，in-URL普遍不受欢迎。您可以将您的功能用于

历史记录。pushState

仅支持浏览器（不包括IE8），并让它在较旧的浏览器中优雅地降级。这里有一些资源供您使用：并且-您可能还想查看此库：如果您不需要支持IE8，或者不介意添加polifyll，我建议使用较新的历史API。这比使用老式哈希要好