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] 将是您需要的哈希。您可以在更改hadnler中使用它并显示所需的div。

查看此演示（我认为它完全符合您的需求。请使用浏览器按钮进行检查）：
http://www.asual.com/jquery/address/samples/api/
样本使用情况： http://www.asual.com/jquery/address/docs/#sample-usage

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

1 个答案: