0

I'm using a click event to show a hidden inline div. I'm currently using Ben Alman's Jquery hashchange event http://benalman.com/projects/jquery-hashchange-plugin/ so that the forward and backward browser buttons will show the hashtag links in the URL. The issue is the hidden divs stay hidden when you go forward and backwards and I need them to show.

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>

Script:

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

1 Answers1

0

If you are ok with changing your hashchange plugin I can reccomend jQuery Address.
See here http://www.asual.com/jquery/address/

In order to catch hash change you write:

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

The good thing about this hashchange function is that the plugin ensures it always gets called after document.ready, so you don't have to about this thing.

event.pathNames[0] will be the hash you need. You can use it inside the change hadnler and show the desired divs.

See this demo (I think it does exactly what you need. Check it with the browser buttons):
http://www.asual.com/jquery/address/samples/api/

Sample usage: http://www.asual.com/jquery/address/docs/#sample-usage

avladov
  • 851
  • 4
  • 12
  • I'm pretty new to JQuery so I'm having a hard time understanding how to implement this based of the sample/demo. I've added rel="address:/#link1" to the links but I don't understand what to do with my script. – user1601906 Sep 13 '12 at 00:02