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
Pestaña 1
Pestaña 2
Enlace contenido 1
        Enlace contenido 1
        Enlace contenido 1
    
Enlace contenido 2
  Enlace contenido 2
  Enlace contenido 2
 

   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:

• Logo Principal
• Enlaces
• Suscríbete
• Un video

Contacto

Sobre mi...

Java

Recibe notificaciones por correo