Mas antes de chegarmos a isso, precisamos adicionar uma linha ao nosso CSS, não há necessidade de passar por cima de todo o arquivo CSS para este exemplo, pois é tudo apenas pela aparência, que irá mudar com qualquer projeto em que você esteja trabalhando. No entanto, com este primeiro método, há uma linha que é essencial e que é:

#page2, #page3, #page4 {display: none;}

Isso oculta todas as 'páginas', exceto a primeira. Então a página aparece normalmente na primeira carga.

O JavaScript

Então agora para explicar o que precisamos alcançar via jQuery. Em nosso arquivo custom.js, precisamos direcionar quando o usuário clica em um link de navegação. Recupere seu link href e encontre a "seção" com o mesmo ID, depois oculte tudo no div # main-content e desmaie na nova seção. Isto é o que parece:

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;}  else {return false;}}; var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); switch (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("click"); break; caso 'page3': $ ("#" + hash + "-link"). trigger ("clique"); break; case 'page4': $ ("#" + hash + "-link"). trigger ("clique"); pausa;}}); 

Este código é dividido em duas seções, a primeira alcança o que acabamos de falar. Tem uma função de clique nos links de navegação do cabeçalho. Em seguida, ele coloca o '# page1, # page2' etc. em uma variável chamada $ linkClicked. Em seguida, atualizamos o URL do navegador para ter o mesmo nome de hash. Em seguida, temos uma declaração if certificando-se de que o link em que estamos clicando não é a guia atual, se não fizer nada, mas se não ocultar todo o conteúdo atual e mostrar o div com um ID de $ linkClicked. Simples assim!

A segunda seção verifica se o url tem um hash link no final dele, se isso acontecer, ele encontra um link correspondente na página com o mesmo valor (é por isso que os links têm IDs específicos na marcação) e, em seguida, dispara esse link. link (clica nele). O que isto significa, significa que o usuário pode recarregar uma página depois de ter navegado para uma 'página' e a atualização enviará o usuário de volta para lá, em vez de voltar para a primeira página, o que pode ser um problema com esse tipo de sistema.

Então, esse é o fim do primeiro método, isso resulta em um site estático de trabalho que tem troca de conteúdo instantânea e nenhuma recarga de página. A única desvantagem desse método é o fato de todo o conteúdo ser chamado no carregamento inicial, já que está tudo lá no arquivo de índice. Isso pode começar a ser um problema com fotos e conteúdo extra, fazendo com que a primeira visita ao site carregue um pouco mais. Então, vamos olhar para outra maneira de fazer o mesmo efeito que pode eliminar esse problema.

Usando AJAX e PHP

Para conseguir esse mesmo efeito, mas de uma maneira um pouco diferente, para que a carga inicial não carregue todo o nosso conteúdo e, portanto, diminua a velocidade (derrotando o ponto se o site tiver muito conteúdo), usaremos um pouco PHP e AJAX. Isso significa que a estrutura do arquivo para o nosso projeto mudará e ficará assim:

Então, se você olhar, o arquivo de índice agora é um .php e não um .html. Também temos um arquivo extra chamado 'load.php', bem como uma nova pasta / diretório chamada páginas, na qual existem quatro páginas HTML. Agora, isso significa que, se você estiver trabalhando localmente, precisará configurar um ambiente de desenvolvimento local usando algo como MAMP (para Mac) ou Servidor WAMP (para Windows). Ou você pode carregar a pasta inteira em um servidor da web se tiver acesso e editar lá, basicamente, você precisará de um ambiente onde o PHP funcione.

O index.php só mudou uma coisa, mas é importante, agora não vamos carregar todo o conteúdo lá, e simplesmente chamar o conteúdo inicial com uma inclusão do PHP. Agora será algo como isto:

AJAX a Static Site

Então a linha começando está chamando o primeiro arquivo HTML de nossa pasta de páginas e inserindo-o inteiramente em nosso # main-content DIV. O arquivo chamado pode conter qualquer conteúdo que você queira que apareça na página.

Usando $ .ajax no JavaScript

Vamos para o novo JavaScript, agora parece um pouco diferente, principalmente agora estamos usando o AJAX para buscar o novo conteúdo de cada arquivo HTML quando o usuário clica em alguma navegação correspondente. Aqui está a primeira função do código (o segundo permanece o mesmo de antes):

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();}  }});} else {event.preventDefault ();}}); 

Então vamos explicar o que está acontecendo. Estamos adicionando mais uma variável, que é $ pageRoot. Este é basicamente o número real clicado (tomando a parte '#page' do hash link e deixando o número individual). Então, dentro da mesma instrução “if” de antes, chamamos ajax e usamos o outro arquivo PHP mencionado anteriormente para analisar as informações fornecidas (qual link foi clicado) e encontrar a página correspondente. Então, se ele voltar sem erro, inseriremos o novo HTML do arquivo recebido em nosso # main-content DIV. Então, apenas para impedir que isso mude repentinamente, escondemos tudo e depois o desvanecemos.

load.php

O conteúdo do novo arquivo PHP é curto e doce, ele pega o número da página que o jQuery enviou e procura ver se o arquivo HTML correspondente existe. Se isso acontecer, obtém todo o conteúdo e retorna-o para a função AJAX (que mostramos há pouco que inserimos esse conteúdo no DIV principal).

Depois disso, o site deve procurar o que você quiser, mas a maioria funciona corretamente.

É isso aí! O site agora chama o arquivo HTML correspondente correto sempre que o usuário clica em um link de navegação. Ele troca o conteúdo sem recarregar a página. E desta forma ainda não tem que chamar todo o conteúdo no carregamento da página inicial! Espero que você tenha aprendido algum método útil deste tutorial e que possa usá-lo para melhorar algum projeto de alguma forma.

Você pode ver o jQuery demo aqui a PHP demo aqui, ou baixar a fonte e dê uma olhada mais de perto.

Você já usou o AJAX para carregar conteúdo? Você já usou uma técnica semelhante para acelerar o seu site? Deixe-nos saber seus pensamentos nos comentários abaixo.

Imagem em destaque / miniatura, imagem superalimentada via Shutterstock.