Crear Tabs o Pestañas con jQuery y CSS

Comparteme :

Cómo hacer una vista JQuery Tab IGUAL A BLOGUERO TUTORIAL?
En este artículo vamos a ver como se hacen tabs o pestañas con jQuery y CSS para agrupar la información de la página web de forma lógica y organizada.

Demostración
1ero: Vamos a la plantilla de blogger y buscamos lo siguiente ]]></b:skin> y justo arriba de éste pegamos el código que les dejo a continuación:

/* tab videos Bloguero Tutorial */
ul.tabs{margin:0 -10px;}
.tabs li{list-style:none;display:inline;}
.tabs a{padding:5px 10px;display:inline-block;background:#cc2323;color:#fff;text-decoration:none;}
.tabs a.active {background:#752222;color:#FFF;}
#tab1,#tab2,#tab3,#tab4{padding:10px;width:570px;background:#000;}

2do: Luego buscamos lo siguiente </head> y justo arribe de éste pegamos el código que les dejo a continuación:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function() {
$(&quot;.contenido_tab&quot;).hide(); //Ocultar capas
$(&quot;ul.tabs li:first&quot;).addClass(&quot;activa&quot;).show(); //Activar primera pestaña
$(&quot;.contenido_tab:first&quot;).show(); //Mostrar contenido primera pestaña

// Sucesos al hacer click en una pestaña Bloguero Tutorial
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;activa&quot;); //Borrar todas las clases &quot;activa&quot;
$(this).addClass(&quot;activa&quot;); //Añadir clase &quot;activa&quot; a la pestaña seleccionada
$(&quot;.contenido_tab&quot;).hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Leer el valor de href para identificar la pestaña activa 
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

3ro: Ahora para finalizar, vamos a una entrada o donde desee instalar los TAB Html, y pegamos éste código editable que les dejo a continuación:

<ul class="tabs">
<li><a href="#tab1">Texto</a></li>
<li><a href="#tab2">Vídeo Musical</a></li>
<li><a href="#tab3">Películas de prueba</a></li>
</ul>
<div class="contenedor_tab">
<div class="contenido_tab" id="tab1">

TEXTO

</div>
<div class="contenido_tab" id="tab2">

VIDEO MUSICALES

</div>
<div class="contenido_tab" id="tab3">

PELICULAS DE PRUEBA

</div>
</div>
<div style="clear: both;">
</div>

Cualquier duda y consulta no olvides dejarlo en la sección de comentarios

Demostración

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Crear Tabs o Pestañas con jQuery y CSS .

Comparte