load and exchange pages from li without reloading menu - php

Question

I would like to load all pages of the website into 1 single page on which the menu is placed - the menu should never reload.
Im using an ordinary ul / li setup, but instead of loading pages through which will replace the entire page, im looking for a solution that loads page into the existing "master page" - og replaces it when another link is clicked
Is there a way to accomplish this with php or Jquery?
Ive tried this php-solution, but the content of the loaded page is not showing:
<?php
$p = $_GET['page'];
switch($page)
{
case "item_1":
$page = "includes/item_1.php";
break;
case "item_2":
$page = "includes/item_2.php";
break;
}
?>
<ul class="sub">
<li> items
<ul class="ul_third">
<li> item 1 </li>
<li> item 2 </li>
</ul>
</li>
</ul>

Answer 1

try this method..this will load all pages div has id #content
<ul id="nav">
<li>welcome</li>
<li>about</li>
<li>portfolio</li>
</ul>
<div id="content">
//Here load the pages
</div>
Script
$(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-4)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});