Changing what is visible based on the url hash - php

Question

Right now I have this list:
<ul id="list">
<li id="active"><img src="main home page/purhome.png"></li>
<li id="active"><img src="main home page/purinfo.png"></li>
<li id="active"><img src="main home page/purgyms.png"></li>
<li id="active"><img src="main home page/purcontact.png"></li>
</ul>
And this JQuery:
$(document).ready(function(){
$("#home-link").click(function(){
$("#main_info2").hide();
$("#main_info").show();
});
$("#info-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#gyms-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#contact-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
});
When I click on the home link, the URL shows indexp.php#home, which is what i want it to show. This happens for all the links. However if i refresh the page after i click on the info link for example, the main_info div is shown, but the browser still says index.php#info. I want to read the hash somehow to show the correct div depending on what the url says.
So for example if I click on the info link, the url shows index.php#info. When I refresh it says the same thing but the main_info div shows when the main_info2 div is supposed to be showing.
function getHash() {
var hash = window.location.hash;
return hash.substring(1); // remove #
}
So I have that code. Would I do something like this?
if hash = 'info' // if url says index.php#info
show main_info2
hide main_info
if hash = nothing // So if url says index.php
show main_info
hide main_info2
Any ideas?
EDIT**
I'm trying to do something like this to make it work:
var currentValue = window.location.hash.substr(1)
$(document).ready(function() {
$("home-link").click(function(){
if(currentValue == "home") {
$("#main_info2").hide();
$("#main_info").show();
}
});
$("info-link").click(function(){
if(currentValue == "info") {
$("#main_info").hide();
$("#main_info2").show();
}
});
});
Although that is not working, can someone check the code?

Answer 1

You can use this jQuery plugin to listen to hash changes:
https://github.com/cowboy/jquery-hashchange
I would recommend using a plugin if you want your code to work cross browser because this hasn't been standardized yet. Especially older browsers (IE6) require extensive hacks.

Answer 2

After some discussion about the different answers and problem, I came up with this solution:
$(document).ready(function(){
$(window).hashchange(function(){
var hash = location.hash;
if(window.location.hash.substr(1) == "home") {
$("#info-container").hide();
$("#gyms-container").hide();
$("#contact-container").hide();
$("#home-container").show();
}
else if(window.location.hash.substr(1) == "info") {
$("#home-container").hide();
$("#gyms-container").hide();
$("#contact-container").hide();
$("#info-container").show();
}
else if(window.location.hash.substr(1) == "gyms") {
$("#home-container").hide();
$("#info-container").hide();
$("#contact-container").hide();
$("#gyms-container").show();
}
else if(window.location.hash.substr(1) == "contact") {
$("#home-container").hide();
$("#info-container").hide();
$("#gyms-container").hide();
$("#contact-container").show();
}
$('#list a').each(function(){
var that = $(this);
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})
$(window).hashchange();
});
This work beautifully.
This uses the hashchange plugin mentioned above so make sure you insert the script into your head before using this function.

Answer 3

Here is bit of code to help you get started if you use https://github.com/cowboy/jquery-bbq:
$(document).ready(function(){
$("#home-link").click(function(){
$("#main_info2").hide();
$("#main_info").show();
});
$("#info-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#gyms-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#contact-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$(window).bind( 'hashchange', function(e) {
url = $.deparam.fragment();
url && $( 'a[href="#' + url + '"]' ).trigger('click');
});
$(window).trigger('hashchange');
});