Tabs o Pestañas en Jquery

Las tabs o pestañas son un recurso muy utilizado en las web para poder economizar los espacios especialmente en las áreas de las barras laterales. Consisten en algunos botones que operan como si fueran solapas y que al ser clickeadas revelan contenido en un contenedor y ocultan el contenido de las demás pestañas. En esta oportunidad les traemos a jQuery Tabslet.


El código para generar las tabs es simple.
 

<div class='tabs tabs_default'>

    <ul class='horizontal'>

        <li><a href="#tab-1">information</a></li>

        <li><a href="#tab-2">tab</a></li>

        <li><a href="#tab-3">tab</a></li>

    </ul>

<div id='tab-1'><h3>This is the default tab functionality.</h3></div>

<div id='tab-2'><h3>Tab 2</h3></div>

<div id='tab-3'><h3>Tab 3</h3></div>

</div>

Tras linkear al proyecto el framework jQuery y el plugin Tabslet, activamos el script:

<script type="text/javascript">

$('.tabs').tabslet();

</script>

Dentro de las opciones que soporta encontramos:

• mouseevent: acción que activa la pestaña (hover, click).
• autorotate: animación automática, podemos establecer el delay.
• _before: nos permite insertar una acción a ejecutarse antes de mostrar la pestaña.
• _after: inserta una acción luego de mostrar la pestaña.
• data-toggle: permite trabajar con dicho atributo.

Sitio oficial | Github.