Question

I have navigation with following values:

<a href="#home" id="home" class="goto">Home</a>
<a href="#profile" id="profile" class="goto">Profile</a>
<a href="#account" id="account" class="goto">Account</a>
<a href="#feedback" id="feed" class="goto">Feedback</a><br><br><div id="target"></div>

Now I have the following function:

$(".goto").live("click", function(){
var goto = $(this).attr("id");
 $.post(goto+".php", {}, function(data){
$("#target").html(data);
});

});

It is working fine but when I hit back on browser it is not doing anything, while I want on hitting back or forward on browser content should change with above mentioned function.

Please don’t divert me to another similar question or page let me know the exact solution.

Answer 1

Since all browsers don’t support it yet, I’d grab the hashchange plugin by Ben Alman, then your can just add:

$(window).hashchange( function(){
  $(location.hash).click();
});

If you hash was say #home after hitting the back button, this would trigger the click handler for that anchor, causing your current handler to execute and load that content. Also if you don’t need to POST, (since you’re not passing any variables), you can simplify your click handler as well, like this:

$(".goto").live("click", function(){
  $("#target").load(this.id+".php");
});