Eu já havia postado essa solução: http://wbruno.com.br/ajax/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/.

Porém, ai a galera começa a querer um ‘efeito de fade’, ‘um gif de carregando..’.

E para resolve isso, é melhor que descartemos a função .load() do jQuery, para usarmos uma em que temos mais controle do que está ocorrendo.

Nesse caso, vou optar pelo $.ajax, já que $.get e $.post, são apenas atalhos para ela.

A maior alteração, será nesse trecho do script anterior:

$("#content").load( href +" #content");

Vamos fazer algo mais sofisticado.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var content = $('#content');

		//pre carregando o gif
		loading = new Image(); loading.src = 'loading.gif';
		$('#menu a').live('click', function( e ){
			e.preventDefault();
			content.html( '<img src="loading.gif" />' );

			var href = $( this ).attr('href');
			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var data = $( '<div>'+response+'</div>' ).find('#content').html();

					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();
						});
					}, 500 );
				}
			});

		});
	});
	</script>
</head>
<body>
	<ul id="menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		<li><a href="contato.html">Contato</a></li>
	</ul><!-- /menu -->
	<div id="content">
		<h1>Bem Vindo!</h1>
		<p>Essa eh a home desse nome pseudo-site.</p>
	</div><!-- /content -->
</body>
</html>

Apenas lembrando que as páginas internas, devem continuar com o código HTML completo, pois queremos que nosso site continue funcionando caso não haja suporte a javascript no navegador do usuário.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	<ul id="menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		<li><a href="contato.html">Contato</a></li>
	</ul><!-- /menu -->
	<div id="content">
		<h1>Fotos</h1>
		

		Fotos fotos fotos
	</div><!-- /content -->
</body>
</html>

Demonstração

Se vc já usou esse script

E teve problemas com os outros scripts do seu site, veja estes links:

Usando lightbox em página carregada com ajax

Carregando conteudo com ajax, trocando a URL com jQuery

O método .live() do jQuery

Como debugar JavaScript com o Firefox ? – erros comuns