Easytabs

EasyTabs es un plugin jQuery ligero que te proporciona la funcionalidad completa para mostrar tabs, dejando el estilo o aspecto a tu gusto.

El código de marcado o HTML es muy sencillo. Tan solo tienes que añadir una lista con los tabs o pestañas que deseas y sus contenedores identificados mediante un id:

<div id="tab-container" class='tab-container'>
    <ul class='etabs'>
       <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
       <li class='tab'><a href="#tabs1-js">Required JS</a></li>
       <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
    </ul>
    <div class='panel-container'>
        <div id="tabs1-html">
            <!--YOUR CONTENT TAB FOR HTML Markup-->
          </div>

        <div id="tabs1-js">
            <!--YOUR CONTENT TAB FOR Required JS-->
        </div>
        <div id="tabs1-css">
            <!--YOUR CONTENT TAB FOR Example CSS-->
          </div>
     </div>
</div>

En la cabecera de la página será necesario que añadas la librería jQuery, el plugin y su llamada:

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="js/jquery.easytabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#tab-container').easytabs({
        animationSpeed: 'normal',
        transitionIn: 'slideDown',
        transitionOut: 'slideUp'
    });
});
</script>

En este ejemplo concreto estamos llamando al plugin con algunos parámetros de animación y transición. Puedes ver todas las opciones disponibles aquí.

El maquetado de las pestañas es muy sencillo. Solo tienes que descargar los archivos de la página oficial donde te vendrá un paquete con los estilos básicos que será muy sencillo editar.

easytabs