Fancy Ajax Tabs
Los Tabs son una forma popular de navegación que permiten mostrar distintas areas de contenido al usuario mediante la selección de una pestaña.
En este artículo vamos a ver un ejemplo de como montar una Web con tabs cargando el contenido con jQuery, Ajax y PHP.
Como siempre que vamos a trabajar con jQuery necesitaremos incluir dentro del <head> la librería y los scripts necesarios.
<link href="screen.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Marcamos el tab home de inicio como actual
$("#home").addClass('button2');
//Al hacer click en uno de los botones
$('.button').click(function(){
//Obtenemos la id del link que contiene el nombre del contenido que queremos mostrar
var page = $(this).attr('id');
//Mostramos un fondo de carga durante unos instantes
$('.search-background').fadeIn(200);
//Realizamos los cambios css de los tabs
$("#home").removeClass('button2');
$("#services").removeClass('button2');
$("#about").removeClass('button2');
$("#contact").removeClass('button2');
$("#"+page).addClass('button2');
var dataString = 'page='+page;
$.ajax({
type: "POST",
url: "content.php",
data: dataString,
success: function(data) {
$('.search-background').fadeOut(200);
$('#place').html(data);
}
});
});
});
</script>
La parte importante de este script es la ejecución del ajax que permitirá cargar en el contenedor con id=»place» la información facilitada por el archivo «content.php».
El archivo «content.php» es el que se encarga de seleccionar un contenido según una id pasada como parámetro.
<?php
switch($_REQUEST['page']) {
case 'home':
echo 'content home';
break;
case 'services':
echo 'content services';
break;
case 'about':
echo 'content about';
break;
case 'contact':
echo 'content contact';
break;
default:
echo 'content home';
break;
}
?>
Después en nuestro <body> podríamos tener el siguiente código HTML:
<div id="content">
<a id="home">Home</a>
<a id="services">Servicios</a>
<a id="about">Sobre</a>
<a id="contact">Contacta</a>
<div id="body">
<div>
<label><img src="loading.gif" alt="" /></label>
</div>
<div id="place"><?php include_once('content.php');?></div>
</div>
</div>
Los estilos los dejo a vuestra imaginación.
Autor
¿Buscas trabajo de programador?
4 respuestas a “Fancy Ajax Tabs”
Deja una respuesta
79 artículos que te podrían interesar
Ver más sobre
Amigo no me ha llegado el codigo al correo que paso lo has enviado o no? yo ya cumpli con mi parte
Amigo no me ha llegado el codigo al correo sera que no me lo has enviado que paso? he cumplido con mi parte lo espero amigo
Bueno amigo ya le di like a tu facebook ahora me puedes enviar el codigo asi como funciona en el demo por favor y te felicito tambien por tu aporte a la comunidad ayuda mucho lo espero amigo gracias..
por favor enviame los archivos necesarios de este ejemplo completo esque lo hice y no funciona por favor necesito hacer uno asi ahi les queda mi correo que es wil_alfred2@hotmail.com se los agradecere muchisimo gracias