Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Crear tabs o pestañas con jQuery y CSS

Tags: crear, tabs, pestańas, jquery, css, manual, truco, secciones, pagina, misma
publicado el 2010-08-30   leido 6629 leídas

El uso de pestaƱas o tabs, es una gran forma de estructurar la informaciĆ³n de una pĆ”gina web  de forma clara y diferenciada, ayudando al usuario a distinguir grupos de contenidos, asĆ­ como los subgrupos que estos contienen.

http://i93.photobucket.com/albums/l45/lawebera/blog/demoview.jpg

Mediante el uso de jQuery suavizamos el comportamiento que las pestaƱas tendrƭan con CSS puro. Puedes ver un ejemplo de tabs hechos con CSS puro aquƭ: CSS Tabs.

Como puede apreciarse el cambio de una pestaƱa a otra es muy brusco. Con jQuery podemos solventar este aspecto del CSS.

puedes ver el ejemplo en marcha aquĆ­: ejemplo de tabs.

Crear los tabs con jQuery y CSS


Para crear este efecto de pestaƱas, utilizo el cĆ³digo que el mismo Soh Tanaka publicĆ³ hace un tiempo en su blog, tabs simples con CSS y jQuery. Este diseƱador creĆ³ un tutorial para incluir contenido en Tabs usando jQuery y CSS.
Un sencillo HTML

BĆ”sicamente el cĆ³digo HTML es el siguiente:
<ul>
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div>
    <div id="tab1">
        <!--Content-->
    </div>
    <div id="tab2">
       <!--Content-->
    </div>
</div>

Luego su CSS

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
/*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
/*--Makes sure that the active tab does not
        listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with
        its content--*/
}

Y este el CSS del contenido de los tabs:

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}

Los tabs, jQuery en acciĆ³n


Este el JavaScript para activar jQuery en los tabs (pestaƱas). Va en el header de la pĆ”gina, o mejor aĆŗn, en un archivo externo:
$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to
                identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});
Hay que acordarse tambiƩn de cargar el core de jQuery en el head para que funcione. Yo particularmente lo cargo del CDN de Google en lugar de almacenarlo en el servidor, para evitar sobrecargar el hosting del sitio para el que estoy diseƱando la pƔgina web:
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

Te gustó?

La web 2.0 el futuro de la web

Jovenes de 25 dan consejos claves de como volverse millonario

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:

Lo mas leido

Aquķ hablamos de
crear     css     datos     dinero     ganar     google     html     internet     javascript     manual     mysql     orientada     pagina     php     phpmyadmin     posicionamiento     programacion     publicidad     seo     web    

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO CĆ³mo ganar dinero con tu web Herramientas y Programas Web
MaquetaciĆ³n con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y DiseƱo Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados