Então, antes de tudo, montei um layout muito simples para este exemplo. Aqui está uma captura de tela e o código HTML que usaremos.

1

2

 xmlns="http://www.w3.org/1999/xhtml">

3

4

 http-equiv="Content-Type" content="text/html; charset=utf-8" />

5

6

7

10

11

12

13

     id="wrapper">

14

    
ajax ... nettuts

15

     id="nav">

16

        
 href="index.html">welcome

17

        
 href="about.html">about

18

        
 href="portfolio.html">portfolio

19

        
 href="contact.html">contact

20

        
 href="terms.html">terms

21

22

     id="content">      

23

        
Welcome!

24

        Text

25

26

     id="foot">Tutorial by James for NETTUTS

27

28

29

Passo 1

Em primeiro lugar, faça o download da versão estável mais recente do jQuery e vincule-a em seu documento:

1

Uma das melhores coisas, na minha opinião, sobre jQuery é sua simplicidade. Podemos obter a funcionalidade descrita acima juntamente com efeitos impressionantes em apenas algumas linhas de código.

Primeiro vamos carregar a biblioteca jQuery e iniciar uma função quando o documento estiver pronto (quando o DOM for carregado).

1

$(document).ready(function() {

2

    // Stuff here

3

});

Passo 2

Portanto, o que queremos fazer é que, quando um usuário clicar em um link no menu de navegação de nossa página, o navegador não navegue para a página correspondente, mas carregue o conteúdo dessa página na página atual.

Queremos direcionar os links dentro do menu de navegação e executar uma função quando eles forem clicados:

1

$('#nav li a').click(function(){

2

    // function here

3

});

Vamos resumir o que queremos que esta função faça na ordem dos eventos:

1. Remova o conteúdo da página atual.
2. Obtenha o novo conteúdo da página e acrescente ao conteúdo DIV.

Precisamos definir de qual página obter os dados quando um link é clicado. Tudo o que temos a fazer aqui é obter o atributo 'href' do link clicado e defini-lo como a página da qual chamar os dados, além de definir o paradeiro na página solicitada para obter os dados - ou seja, não deseja extrair TODOS os dados, apenas os dados dentro do div 'conteúdo', então:

1

var toLoad = $(this).attr('href')+' #content';

Para ilustrar o que o código acima faz, vamos imaginar que o usuário clica no link 'sobre' que direciona para 'sobre.html' - nesta situação esta variável seria: 'sobre.html #conteúdo' - esta é a variável que nós ll solicitar na chamada ajax. Primeiro, porém, precisamos criar um bom efeito para o conteúdo da página atual. Em vez de fazê-lo desaparecer, vamos usar a função 'hide' do jQuery assim:

1

$('#content').hide('fast',loadContent);

A função acima 'esconde' o #content div rapidamente, e uma vez que o efeito termina, então inicia a função "loadContent" (carrega o novo conteúdo [via ajax]) - uma função que definiremos mais tarde (no passo 4).

etapa 3

Depois que o conteúdo antigo desaparecer com um efeito incrível, não queremos apenas deixar o usuário se perguntando antes que o novo conteúdo chegue (especialmente se ele tiver uma conexão lenta com a Internet), então criaremos um pequeno gráfico de "carregamento" para que ele saiba algo está acontecendo em segundo plano:

1

$('#wrapper').append('LOADING...');

2

$('#load').fadeIn('normal');

Aqui está o CSS aplicado ao recém-criado #load div:

1

#load {

2

    display: none;

3

    position: absolute;

4

    right: 10px;

5

    top: 10px;

6

    background: url(images/ajax-loader.gif);

7

    width: 43px;

8

    height: 11px;

9

    text-indent: -9999em;

10

}

Portanto, por padrão, esse intervalo de 'carregamento' é definido como display:none, mas quando a função fadeIn é iniciada (no código acima), ela desaparece no canto superior direito do site e mostra nosso GIF animado até que seja sumiu de novo.

Passo 4

Até agora, quando um usuário clicar em um dos links, acontecerá o seguinte:

1. O conteúdo atual desaparece com um efeito legal
2. Uma mensagem de carregamento aparece

Agora, vamos escrever a função loadContent que chamamos anteriormente:

1

function loadContent() {

2

    $('#content').load(toLoad,'',showNewContent)

3

}

A função loadContent chama a página solicitada e, uma vez feito isso, chama a função 'showNewContent':

1

function showNewContent() {

2

    $('#content').show('normal',hideLoader);

3

}

Esta função showNewContent usa a função show do jQuery (que na verdade é um nome muito chato para um efeito muito legal) para fazer o novo conteúdo (solicitado) aparecer dentro do div '#content'. Depois de chamar o conteúdo, ele inicia a função 'hideLoader':

1

function hideLoader() {

2

    $('#load').fadeOut('normal');

3

}

Temos que lembrar de "retornar falso" no final da nossa função de clique - isso é para que o navegador não navegue até a página

Deve funcionar perfeitamente agora. Você pode ver um exemplo disso aqui: [LINK]

Aqui está o código até agora:

1

$(document).ready(function() {

2

3

    $('#nav li a').click(function(){

4

5

    var toLoad = $(this).attr('href')+' #content';

6

    $('#content').hide('fast',loadContent);

7

    $('#load').remove();

8

    $('#wrapper').append('LOADING...');

9

    $('#load').fadeIn('normal');

10

    function loadContent() {

11

        $('#content').load(toLoad,'',showNewContent())

12

    }

13

    function showNewContent() {

14

        $('#content').show('normal',hideLoader());

15

    }

16

    function hideLoader() {

17

        $('#load').fadeOut('normal');

18

    }

19

    return false;

20

21

    });

22

});

Passo 5

Você pode parar por aí, mas se estiver preocupado com a usabilidade (o que deveria estar), é importante trabalhar um pouco mais. O problema com nossa solução atual é que ela negligencia a URL. E se um usuário quiser criar um link para uma das 'páginas'? - Não tem como eles fazerem porque a URL é sempre a mesma.

Portanto, uma maneira melhor de fazer isso seria usar o valor 'hash' na URL para indicar o que o usuário está visualizando. Portanto, se o usuário estiver visualizando o conteúdo 'sobre', o URL poderá ser: 'www.website.com/#sobre'. Precisamos apenas adicionar uma linha de código à função 'click' para que o hash seja adicionado à URL sempre que o usuário clicar em um link de navegação:

1

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

O código acima basicamente altera o valor do hash da URL para o valor do atributo 'href' do link clicado (menos a extensão '.html'). Portanto, quando um usuário clica no link 'home' (href=index.html), o hash o valor será '#index'.

Além disso, queremos possibilitar que o usuário digite o URL e receba a página correta. Para fazer isso, verificamos o valor do hash quando a página é carregada e alteramos o conteúdo de acordo:

1

var hash = window.location.hash.substr(1);

2

var href = $('#nav li a').each(function(){

3

    var href = $(this).attr('href');

4

    if(hash==href.substr(0,href.length-5)){

5

        var toLoad = hash+'.html #content';

6

        $('#content').load(toLoad)

7

    } 

8

});

Com isso incluído, aqui está todo o código javascript necessário: (mais a biblioteca jQuery)

1

$(document).ready(function() {

2

3

    // Check for hash value in URL

4

    var hash = window.location.hash.substr(1);

5

    var href = $('#nav li a').each(function(){

6

        var href = $(this).attr('href');

7

        if(hash==href.substr(0,href.length-5)){

8

            var toLoad = hash+'.html #content';

9

            $('#content').load(toLoad)

10

        } 

11

    });

12

13

    $('#nav li a').click(function(){

14

15

    var toLoad = $(this).attr('href')+' #content';

16

    $('#content').hide('fast',loadContent);

17

    $('#load').remove();

18

    $('#wrapper').append('LOADING...');

19

    $('#load').fadeIn('normal');

20

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

21

    function loadContent() {

22

        $('#content').load(toLoad,'',showNewContent())

23

    }

24

    function showNewContent() {

25

        $('#content').show('normal',hideLoader());

26

    }

27

    function hideLoader() {

28

        $('#load').fadeOut('normal');

29

    }

30

    return false;

31

32

    });

33

});

Finalizado...

O melhor desse método é que ele é adaptável e pode ser aplicado a um site em minutos. É totalmente discreto e o site funcionará normalmente se o usuário tiver desativado o JS.

Veja o Exemplo de Trabalho Final

Baixe o HTML, JS, CSS e Imagens