jquery change content in php template from file with "pages" in - php

Question

I've created a php template with variables library and what not all pulled into an index page I've created a basic script with fades the page in and out on load and have got that working the next thing I wanted to do is to use my navbar links to pull formatted content into the page (as I'm using foundation 4 framework) now the code I tried is as follows
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
the idea is that onclick it removes the content with the wrapper displays a loading gif and then loads the page content which is stored in the link referred to in the
but its not working is just reloading the whole page . . . . i have tried reading up and it says that you can use
You can extract from another page using the load method thus >$('#targetElement').load('page.htm #container') syntax.
and using the get function but im not to good at all this jquery is there a way I can do it in php or where am I going wrong with what I've done.

Answer 1

Try this....You were calling the load, and functions inside improperly...
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
//window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show('normal',hideLoader);
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});

Answer 2

When a user clicks a link the browser by default unloads the current page and loads the page indicated by that link.
You need to prevent the default behavior of the browser, in order to do this you need to call the .preventDefault() method on the click event that was triggered for that link.
$('#your-context').click(function(event) {
event.preventDefault();
/**
* the rest of your code here
*/
});