使用后退和前进浏览器按钮时单击事件触发

Question

我正在使用点击事件来显示隐藏的内联 div。我目前正在使用 Ben Alman 的 Jquery hashchange 事件http://benalman.com/projects/jquery-hashchange-plugin/，以便向前和向后浏览器按钮将在 URL 中显示主题标签链接。问题是当你前进和后退时隐藏的 div 保持隐藏状态，我需要它们显示。

HTML：

<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
<li><a href="#link4"><Link 4</a></li>
</ul>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

脚本：

$("#link1").click(function() {
    $("#div1").fadeIn("400");
    $("#div2, #div3, #div4").hide(); 
});
$("#link2").click(function() {
    $("#div2").fadeIn("400");
    $("#div1, #div3, #div4").hide();
});

Answer 1

如果您可以更改您的 hashchange 插件，我可以推荐 jQuery 地址。
看这里http://www.asual.com/jquery/address/

为了捕捉你写的哈希变化：

$.address.change(function(event) {
    // Your code here
});

这个 hashchange 函数的好处是插件确保它总是在 document.ready 之后被调用，所以你不必担心这个问题。

event.pathNames[0] 将是您需要的哈希值。您可以在 change hadnler 中使用它并显示所需的 div。

查看此演示（我认为它完全符合您的需要。使用浏览器按钮进行检查）：
http://www.asual.com/jquery/address/samples/api/

示例用法： http://www.asual.com/jquery/address/docs/#sample-usage