Pero antes de llegar a eso, necesitamos agregar una línea a nuestro CSS, no hay necesidad de revisar todo el archivo CSS para este ejemplo, ya que es solo para apariencia, que cambiará con cualquier proyecto en el que esté trabajando. Sin embargo, con este primer método hay una línea que es esencial y eso es:

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

Esto oculta todas las 'páginas' excepto la primera. Entonces, la página aparece normalmente en la primera carga.

El JavaScript

Entonces ahora explica lo que necesitamos lograr a través de jQuery. En nuestro archivo custom.js, debemos orientarnos cuando el usuario hace clic en un enlace de navegación. Recupere su enlace href y encuentre la 'sección' con esa misma ID, luego oculte todo en el # div de contenido principal y fade en la nueva sección. Esto es lo 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; case 'page3': $ ("#" + hash + "-link"). trigger ("click"); break; case 'page4': $ ("#" + hash + "-link"). trigger ("click"); break;}}); 

Este código se divide en dos secciones; el primero logra lo que acabamos de mencionar. Tiene una función de clic en los enlaces de navegación del encabezado. A continuación, coloca '# page1, # page2', etc. en una variable llamada $ linkClicked. Luego actualizamos la URL del navegador para que tenga el mismo nombre hash. Luego tenemos una declaración if asegurándonos de que el enlace en el que estamos haciendo clic no es la pestaña actual, si es que no hace nada, pero si no esconde todo el contenido actual y muestra el div con un ID de $ linkClicked. ¡Simple como eso!

La segunda sección comprueba si la URL tiene un enlace hash al final, si lo hace, encuentra un enlace correspondiente en la página con el mismo valor (es por eso que los enlaces tienen identificadores específicos en el marcado) y luego activa esa enlace (hace clic en él). Lo que hace esto es que el usuario puede volver a cargar una página después de haber navegado a una 'página' y la actualización enviará al usuario allí en lugar de volver a la primera página, lo que a menudo puede ser un problema con este tipo de sistema.

Así que ese es el final del primer método, esto da como resultado un sitio estático en funcionamiento que tiene intercambio de contenido instantáneo y no se recarga la página. El único inconveniente de este método es el hecho de que todo el contenido se invoca en la carga inicial, ya que está todo allí en el archivo de índice. Esto puede comenzar a ser un problema con las fotos y el contenido adicional que hace que la primera visita al sitio cargue un poco más. Así que veamos otra forma de hacer este mismo efecto que puede eliminar ese problema.

Usando AJAX y PHP

Para lograr este mismo efecto, pero de una manera ligeramente diferente, de modo que la carga inicial no cargue todo nuestro contenido y, por lo tanto, disminuya la velocidad (derrotando el punto si el sitio tiene mucho contenido) usaremos un poco PHP y AJAX. Esto significa que la estructura de archivos de nuestro proyecto cambiará y se verá así:

Entonces, si mira, el archivo de índice ahora es .php y no .html. También tenemos un archivo adicional llamado 'load.php', así como una nueva carpeta / directorio llamado páginas en las que hay cuatro páginas HTML. Ahora, esto significa que, si trabajas localmente, debes configurar un entorno de desarrollo local utilizando algo así como MAMP (para Mac) o Servidor WAMP (para ventanas). O puede cargar toda la carpeta en un servidor web si tiene acceso y edición allí, básicamente necesitará un entorno donde funcionará PHP.

El index.php solo ha cambiado una cosa, pero es importante, ahora no cargaremos todo el contenido, y simplemente llamaremos al contenido inicial con un PHP incluido. Ahora se verá algo como esto:

AJAX a Static Site

Entonces el comienzo de la línea está llamando al primer archivo HTML de nuestra carpeta de páginas e insertando completamente en nuestro # contenido principal DIV. El archivo llamado puede contener cualquier contenido que desee que aparezca en la página.

Usando $ .ajax en el JavaScript

Pasemos al nuevo JavaScript, ahora se ve ligeramente diferente, principalmente ahora estamos usando AJAX para buscar el nuevo contenido de cada archivo HTML cuando el usuario hace clic en la navegación correspondiente. Aquí está la primera función en el código (el segundo permanece igual que 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 ();}}); 

Entonces, expliquemos lo que está pasando. Estamos agregando una variable más, eso es $ pageRoot. Este es básicamente el número real en el que se hace clic (tomando la parte 'página' del enlace hash y dejando el número individual). Luego, dentro de la misma declaración "if" que antes, llamamos ajax y usamos el otro archivo PHP que mencionamos anteriormente para analizar la información proporcionada (en qué enlace se ha hecho clic) y encontrar la página correspondiente. Luego, si vuelve sin error, insertamos el nuevo HTML del archivo recibido en nuestro # DIV de contenido principal. Entonces, para evitar que cambie repentinamente, lo ocultamos todo y luego lo atenuamos.

load.php

El contenido del nuevo archivo PHP es corto y agradable, toma el número de página que jQuery le ha enviado y busca si existe el archivo HTML correspondiente. Si lo hace, obtiene todo el contenido y lo devuelve a la función AJAX (que mostramos hace un momento que insertamos ese contenido en la DIV principal).

A continuación, el sitio debe verse como quieras, pero la mayoría funciona correctamente.

¡Eso es! El sitio ahora llama al archivo HTML correspondiente cada vez que el usuario hace clic en un enlace de navegación. Cambia el contenido sin hacer que la página se vuelva a cargar. ¡Y de esta manera todavía no tiene que llamar todo el contenido en la carga inicial de la página! Espero que haya logrado aprender algún método útil de este tutorial y que puede usarlo para mejorar algún proyecto de alguna manera.

Puedes ver el Demostración de jQuery aquí, el Demostración de PHP aquí, o descarga la fuente y mira más de cerca.

¿Has usado AJAX para cargar contenido? ¿Has usado una técnica similar para acelerar tu sitio? Háganos saber sus pensamientos en los comentarios a continuación.

Imagen / miniatura destacada, imagen sobrealimentada a través de Shutterstock.