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>
En que parte debe ir el codigo CSS
ResponderEliminarAntes de B:skin, salu2
ResponderEliminar