Tab para videos CSS

Comparteme :

Tab o pestañas para videos:

Colocar el siguiente código antes de </head>


<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
$(&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>

coloca el siguiente código antes de ]]></b:skin>



/* TABS DE VIDEOS
----------------------------------------------- */
/* CSS Tabs jQuery */
.contenedor_tab{float:left;clear:both;width:620px;padding:0px;margin:0 auto;display:block;background:#ccc;border:1px solid #333;-moz-border-radius:0 0 7px 7px;-webkit-border-radius:0 0 7pc 7px;border-radius: 0 0 7px 7px;}
ul.tabs{float:left;margin:0;padding:0;list-style:none;height:32px;width:640px;margin-top:-7px;}
ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;border:1px solid #333;margin-bottom:-1px;background:#333;overflow:hidden;position:relative;border:1px solid #333;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;}
ul.tabs li a{text-decoration:none;color:#fff;display:block;font-size:13px;padding:0 20px;border:1px solid #fff;outline:none;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;}
ul.tabs li a:hover{background:#666;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {color:#333;font-weight:bold;background:#ccc;border-bottom:1px solid #ccc;}
.contenido_tab{padding:10px;font-size:1.2em;width:580px;}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

Y colocan el siguiente código en la entrada que vas a publicar


<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>
<li><a href="#tab4">Opción 4</a></li>
</ul>

<div class="contenedor_tab">
<div class="contenido_tab" id="tab1">

Contenido 1
</div>

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

Contenido 2
</div>

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

Contenido 3
</div>

<div class="contenido_tab" id="tab4">

Contenido 4
</div>

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

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í ?

Tab para videos CSS.

Comparte

BLOGUERO TUTORIAL