20 feb. 2013

Tabs Estilo TodoAnimes

 
Las tabs son tablas donde se insertan vídeos, en este caso les explicare como instalar en su blog las tabs al estilo de Todoanimes, que es una pagina dedicada a Animes online. Estas tablas son útiles al momento de querer insertar varios vídeos pues con este script se ordenan por pestañas los vídeos y hace mas fácil la visualización de los mismos.



Primero vamos a insertar un script justo antes de la etiqueta </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'> $(document).ready(function() { $(".contenido_tab").hide(); //Ocultar capas $("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña $(".contenido_tab:first").show(); //Mostrar contenido primera pestaña // Sucesos al hacer click en una pestaña $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa" $(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada $(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa $(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo return false; }); }); </script>

Una vez hecho esto seguimos con darle el estilo (css):
/* Menu Tabs*/ /* CSS Tabs jQuery */ .contenedor_tab{float:left;clear:both;width:700px;padding:0;margin:0 auto;display:block;background:#ccc;}
ul.tabs{margin:0;padding:0;float:left;list-style:none;height:32px;border-bottom:1px solid #E8E8E8;border-left:1px solid #E8E8E8;width:700px;margin-top:-7px}
ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;border:1px solid #E8E8E8;border-left:none;margin-bottom:-1px;background:#e0e0e0;overflow:hidden;position:relative;}
ul.tabs li a{text-decoration:none;color:#000;display:block;font-size:13px;padding:0 20px;border:1px solid #f8f8f8;outline:none}
ul.tabs li a:hover{background:#eaeaea;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {background:#f8f8f8;border-bottom:1px solid #f8f8f8;}
.contenido_tab{padding:10px;font-size:1.2em;width:680px}
.contenido_tab img{padding:10px;font-size:1.2em;width:680px}

Como ultimo paso solo nos queda agregar el código html en un entrada:
<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li> <li><a href="#tab2">Opción 2</a></li> <li><a href="#tab3">Opción 3</a></li> </ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab"> CONTENIDO 1 </div>
<div id="tab2" class="contenido_tab"> CONTENIDO2 </div>
<div id="tab3" class="contenido_tab"> CONTENIDO3 </div>
</div> <div style="clear:both;"> </div>

2 comentarios :