Ma prima di arrivare a questo abbiamo bisogno di aggiungere una riga al nostro CSS, non c'è bisogno di consultare l'intero file CSS per questo esempio dato che è tutto solo per look, che cambierà con qualunque progetto stiate lavorando. Tuttavia, con questo primo metodo c'è una riga che è essenziale e cioè:

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

Nasconde tutte le 'pagine' tranne la prima. Quindi la pagina appare normalmente al primo caricamento.

Il JavaScript

Quindi ora per spiegare cosa dobbiamo ottenere tramite jQuery. Nel nostro file custom.js, dobbiamo scegliere come target quando l'utente fa clic su un link di navigazione. Recupera il suo href link e trova la 'sezione' con lo stesso ID, quindi nascondi tutto nel div # main-content e sbiadisci nella nuova sezione. Questo è quello che sembra:

$(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 ("clic"); break; case "page3": $ ("#" + hash + "-link"). trigger ("clic"); break; case "page4": $ ("#" + hash + "-link"). trigger ("clic"); break;}}); 

Questo codice è diviso in due sezioni, la prima ottiene ciò di cui abbiamo appena parlato. Ha una funzione click sui link nav dell'intestazione. Quindi inserisce la '# page1, # page2' ecc in una variabile denominata $ linkClicked. Quindi aggiorniamo l'URL del browser per avere lo stesso nome hash. Quindi abbiamo un'istruzione if che si assicura che il link che stiamo facendo clic non sia la scheda corrente, se non fa nulla, ma se non nasconde tutto il contenuto corrente e mostra il div con un ID di $ linkClicked. Semplice come quella!

La seconda sezione controlla se l'url ha un link hash alla fine di esso, se lo fa, trova un collegamento corrispondente nella pagina con lo stesso valore (ecco perché i link hanno ID specifici nel markup) e poi lo fa scattare link (fa clic su di esso). Ciò significa che l'utente può ricaricare una pagina dopo aver navigato su una "pagina" e l'aggiornamento invierà l'utente al suo posto anziché tornare alla prima pagina, il che può spesso essere un problema con questo tipo di sistema.

Quindi questa è la fine del primo metodo, questo si traduce in un sito statico funzionante che ha lo scambio di contenuti istantanei e nessuna ricarica della pagina. L'unico svantaggio di questo metodo è il fatto che tutto il contenuto è richiamato sul caricamento iniziale, poiché è tutto lì nel file indice. Questo può iniziare a essere un problema con foto e contenuti extra che rendono la prima visita del sito più carica. Diamo un'occhiata a un altro modo per fare lo stesso effetto che può eliminare quel problema.

Utilizzando AJAX e PHP

Per ottenere questo stesso effetto ma in un modo leggermente diverso, in modo che il caricamento iniziale non carichi tutto il nostro contenuto e quindi rallenti (sconfiggendo il punto se il sito ha molti contenuti) useremo un po ' PHP e AJAX. Ciò significa che la struttura del file per il nostro progetto cambierà e assomiglierà a questo:

Quindi, se si guarda, il file indice ora è un .php e non un .html. Abbiamo anche un file aggiuntivo chiamato "load.php" e una nuova cartella / directory chiamata pagine in cui ci sono quattro pagine HTML. Questo significa che se stai lavorando localmente devi configurare un ambiente di sviluppo locale usando qualcosa di simile MAMP (per Mac) o Server WAMP (per Windows). Oppure puoi caricare l'intera cartella su un server web se hai accesso e modifica lì, in pratica avrai bisogno di un ambiente in cui il PHP funzionerà.

L'index.php ha cambiato solo una cosa, ma è importante, non caricaremo tutto il contenuto e semplicemente richiameremo il contenuto iniziale con una inclusione di PHP. Ora assomiglierà a qualcosa del genere:

AJAX a Static Site

Quindi l'inizio della linea sta chiamando il primo file HTML dalla nostra cartella di pagine e inserendo interamente nel nostro # DIV contenuto principale. Il file chiamato può contenere qualsiasi contenuto tu voglia apparire sulla pagina.

Usando $. Ajax nel JavaScript

Passiamo al nuovo JavaScript, ora sembra leggermente diverso, principalmente ora stiamo utilizzando AJAX per recuperare il nuovo contenuto da ogni file HTML quando l'utente fa clic su una navigazione corrispondente. Ecco la prima funzione nel codice (la seconda rimane la stessa di prima):

$(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 ();}}); 

Quindi spieghiamo cosa sta succedendo. Stiamo aggiungendo un'altra variabile, ovvero $ pageRoot. Questo è in pratica il numero reale cliccato (prendendo la parte '#pagina' del collegamento hash e lasciando il numero individuale). Quindi all'interno della stessa istruzione "if" come prima chiamiamo ajax e usiamo l'altro file PHP che abbiamo menzionato prima per analizzare le informazioni fornite (su quale collegamento è stato fatto clic) e trovare la pagina corrispondente. Quindi, se ritorna senza errori, inseriamo il nuovo codice HTML dal file ricevuto nel nostro DIV contenuto principale. Quindi, per evitare che cambi improvvisamente, nascondiamo tutto e poi lo sbiadiamo.

load.php

Il contenuto del nuovo file PHP è breve e dolce, prende il numero di pagina che jQuery ha inviato e guarda se esiste il file HTML corrispondente. Se lo fa, ottiene tutto il contenuto e lo restituisce alla funzione AJAX (che abbiamo mostrato un attimo fa che inseriamo quel contenuto nel DIV principale).

A seguito di ciò il sito dovrebbe sembrare comunque lo si desideri, ma per lo più funziona correttamente.

Questo è tutto! Il sito ora chiama nel file HTML corrispondente giusto ogni volta che l'utente fa clic su un link di navigazione. Scambia il contenuto senza ricaricare la pagina. E in questo modo non ha ancora bisogno di richiamare tutto il contenuto sul caricamento iniziale della pagina! Spero che tu abbia imparato qualche metodo utile da questo tutorial e che tu possa usarlo per migliorare alcuni progetti in qualche modo.

È possibile visualizzare il jQuery demo qui, il Demo PHP qui, o scarica la fonte e dare un'occhiata più da vicino.

Hai usato AJAX per caricare i contenuti? Hai usato una tecnica simile per velocizzare il tuo sito? Fateci sapere i vostri pensieri nei commenti qui sotto.

Immagine in primo piano / miniatura, immagine sovralimentata via Shutterstock.