CSS & jQuery Tabs

Name: CSS & jQuery Tabs
Brand: Jose Aguilar
SKU: joseaguilarblog-2534
Availability: InStock
Rating: 5 (5 reviews)

Los Tabs CSS son una forma popular de navegación que permiten mostrar distintas areas de contenido al usuario mediante la selección de una pestaña.

En este artículo vamos a ver como relizar un bloque de contenido con tabs utlizando las tecnologías: CSS, HTML y jQuery.

Los estilos son totalmente configurables a través de la hoja de estilos (CSS) y los efectos tras el cambio de tab también se pueden personalizar cambiando el código jQuery empleado para ello.

Para disponer de este bloque de tabs lo primero que tendremos que hacer es añadir en nuestro <head> los estilos y scripts necesarios.

<link rel="stylesheet" type="text/css" href="tabs.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".tab_content").hide();
    $(".tab_content:first").show(); 

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel"); 
        $("#"+activeTab).fadeIn(); 
    });
});
</script>

Nuestra hoja de estilos será como la siguiente y que podemos llamar «tabs.css» con lo siguiente:

ul.tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 32px;
        border-bottom: 1px solid #999999;
        border-left: 1px solid #999999;
        width: 100%;
    }
    ul.tabs li {
        float: left;
        margin: 0;
        cursor: pointer;
        padding: 0px 21px ;
        height: 31px;
        line-height: 31px;
        border: 1px solid #999999;
        border-left: none;
        font-weight: bold;
        background: #EEEEEE;
        overflow: hidden;
        position: relative;
    }
    ul.tabs li:hover {
        background: #CCCCCC;
    }    
    ul.tabs li.active{
        background: #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
    }
    .tab_container {
        border: 1px solid #999999;
        border-top: none;
        clear: both;
        float: left; 
        width: 100%;
        background: #FFFFFF;
    }
    .tab_content {
        padding: 20px;
        font-size: 1.2em;
        display: none;
    }
    #container {
        width: 600px;
        margin: 0 auto;    
    }

Después en nuestro <body> necesitaremos depositar el código HTML necesario. Tendremos una lista de links que representarán los tabs de la siguiente forma:

<ul class="tabs"> 
        <li rel="tab1"> Call of Duty</li>
        <li rel="tab2"> Mortal Combat</li>
        <li rel="tab3"> Halo</li>
        <li rel="tab4"> Portal</li>
    </ul>

Y seguidamente los contenedores de cada tab:

<div id="tab1" class="tab_content"> 
         <strong>
         Call of Duty: Black Ops bears the series' standard superbly,
         delivering an engrossing campaign and exciting competitive multiplayer.
         </strong>
         </p>
</div>

En el código HTML anterior mostramos el contenido de uno de los tabs. Hay que tener en cuenta que para que funcione cada tab debe tener un id único.

Lo podemos ver mejor en el ejemplo en funcionamiento.