Pestañas con jQuery

Volviendo a jQuery, quiero explicar el uso de las pestañas, crear pestañas con efectos es una de las opciones favoritas al momento de diseñar una web o cualquier otra cosa.

   Bien, primero que nada debemos saber como funcionan las pestañas, estas son unos enlaces a contenidos, que por decirlo así son frames internos, al hacer click se nos muestra el contenido de "x" pestaña y se oculta el otro, dejando seleccionada donde hacemos click y desactivando la anterior para obtener el efecto de selección...

   Sabiendo esto entonces podemos partir de la idea de que debemos crear un "div" que contenga las pestañas y otro que almacene el contenido de cada una, de esta forma tendremos un enlace que haga referencia a nuestras pestañas. Entonces el código básico sería el siguiente:
//El Script de jQuery
$(document).ready(function() {
 $(".el_contenido").hide();
  $("ul.pestañas li:first").addClass("active").show();
  $(".el_contenido:first").show();
  $("ul.pestañas li").click(function(){
   $("ul.pestañas li").removeClass("active");
   $(this).addClass("active");
   $(".el_contenido").hide();
   var activeTab = $(this).find("a").attr("href");
   $(activeTab).fadeIn();
   return false;
 });
});

//El html

   Entonces ya con esto tenemos un ejemplo básico en el que nos salen enlaces y al hacer click se muestra "X" contenido, como explique anteriormente así es como funcionan las pestañas, enlaces ocultos que se muestran al hacer click (por dar una definición rápida), entonces para crear el efecto completo nos faltaría lo mas importante, el estilo, el CSS. Como vemos en el código ya están referenciados los elementos, entonces una forma básica sería la siguiente:
.el_contenedor {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.el_contenido {
    padding: 20px;
    font-size: 1.2em;
}
ul.pestañas {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.pestañas li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.pestañas li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.pestañas li a:hover {
    background: #ccc;
}
html ul.pestañas li.active, html ul.pestañas li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}

   De esta forma creamos un cuadro al rededor de cada pestaña, creando un efecto limpio, con "li.active" definimos la pestaña activa, donde le creamos un borde inferior del mismo color de fondo del contenido para simular un efecto activo, la clase ".el_contenedor" es el recuadro principal, y la clase ".el_contenido" es donde se encuentra el contenido de la pestaña.

   Recordemos que podemos agregar imágenes, objetos o cualquier cosa que se nos ocurra. De tal forma que el resultado final sería el siguiente:





carlitox en la web



5 Comentarios

Escribir Comentario
Nahuel
AUTOR
3 de enero de 2011, 14:38 delete

Quedaron muy bien! Yo hice una especie de tutorial para crear algo parecido desde cero. Es mucho más básico que el tuyo, pero me gustó el resultado:
http://nahueljose.com.ar/articles/navegador-de-pestanias-con-jquery/

Muy bueno tu blog!

Responder
avatar
Anónimo
AUTOR
10 de enero de 2011, 23:26 delete

Por que no:)

Responder
avatar
Anónimo
AUTOR
10 de junio de 2011, 9:29 delete

Hola, como hago para almacenar los datos que un usuario introduzca en input text en el contenido de cada pestaña y poder mostrarlos todos juntos al dar click en el ultimo boton.

Responder
avatar
12 de junio de 2011, 17:08 delete

Bueno, para eso tienes varias formas, pero desde ya te digo que necesitas si o si saber un poco de programación, si lo que quieres es JavaScript en mi blog usando el cuadro de buscada encontraras lo que necesitas, si se trata de un formulario y cosas así, entonces ya es PHP, dime en que lenguaje lo necesitas para poder ayudarte mejor y dime como quieres mostrar los resultados, aunque si es como pienso lo que necesitas es AJAX... coméntame para ayudarte mejor... Saludos!!!

Responder
avatar
Anónimo
AUTOR
16 de junio de 2011, 13:59 delete

quuiero agradecer por su ayuda, me es muy util y este blog me gusta bastante es de mis favoritos!
gracias de nuevo

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión