TABS SIN ERRORES

PONER ESTO EN LA 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 class="contenido_tab" id="tab1">
Agrega aqui el contenido &amp; embed de Video
</div>
<div class="contenido_tab" id="tab2">
https://mega.nz/#!kKIgiQCJ!Ha6PNfPeNrkPgDLxMF_f6YAVqWXuz_dnD_dfpoYxzUE
https://mega.nz/#!kKIgiQCJ!Ha6PNfPeNrkPgDLxMF_f6YAVqWXuz_dnD_dfpoYxzUE
https://mega.nz/#!kKIgiQCJ!Ha6PNfPeNrkPgDLxMF_f6YAVqWXuz_dnD_dfpoYxzUE
</div>
<div class="contenido_tab" id="tab3">
Agrega aqui el contenido &amp; embed de Video
</div>
</div>
<div style="clear: both;">
</div>

SCRIB Colocar encima de head osea antes del </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>

codigo css

ul.tabs{width:100%;max-width:800px;margin:0 auto;padding:0;list-style:none;height:32px;font-size:0;line-height:0;}

ul.tabs li{display:inline-block;width:33.33%;margin:0;padding:0;height:32px;line-height:32px;background:#333;overflow:hidden;position:relative;border:1px solid #333;border-bottom:0;box-sizing:border-box;border-radius:7px 7px 0 0;}

ul.tabs li a{display:block;padding:0 5px;text-decoration:none;color:#fff;font-size:14px;text-align:center;border:1px solid #CCC;box-sizing:border-box;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:700;background:#ccc;}

.contenedor_tab{width:100%;max-width:800px;margin:-1px auto 0;padding:0;background:#ccc;border:1px solid #333;border-top:0;box-sizing:border-box;border-radius:0 0 7px 7px;}

.contenido_tab{padding:10px;font-size:14px;box-sizing:border-box;}

Share on Google Plus

About wily

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.