¿Cómo creo pestañas simples con CSS y jQuery?

Quiero crear algunas pestañas simples.

Tengo 3 divs con contenido diferente y los he colocado uno encima del otro estableciendo un margen superior negativo en los dos segundos divs.

Luego tengo 3 pestañas y configuré mi código para que cuando hagas clic #tab1 .fadein content1.

Ejemplo:

$(document).ready(function() {
  $(".content-kidsclub").hide();
  $("#tab1").click(function() {
    $(".content-kidsclub").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-computersuite").hide();
  $("#tab2").click(function() {
    $(".content-computersuite").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-education-assistance").hide();
  $("#tab3").click(function() {
    $(".content-education-assistance").fadeTo("slow", 1.0);
  });
});

La primera vez que hago clic en cada uno funciona bien. pero después de eso simplemente se detiene. Y también: si hace clic primero en tab2, está muy por encima debido al margen negativo. No estoy seguro de por qué.

Me siento tan cerca pero tan lejos. Tengo sospechas de que tiene algo que ver con las devoluciones de llamada.

Soy muy nuevo en jQuery, por lo que esto puede parecer un poco tonto lo que estoy tratando de hacer.

En general, ¿alguien sabe una mejor manera de posicionar divs uno encima del otro y luego haga que las pestañas funcionen. ¿Tiene algo que ver con el uso display:block y todo ese tipo de cosas.

preguntado el 12 de junio de 12 a las 18:06

Solo necesitas uno $(document).ready() función. Puede hacer todas sus pestañas en una función lista. -

5 Respuestas

¿Por qué no usar JQuery UI y usar la función de pestañas?

http://jqueryui.com/demos/tabs/

Súper fácil de configurar y poner en marcha.

Respondido el 12 de junio de 12 a las 18:06

Puedo brindarle ayuda más detallada si tiene problemas. - cristobal marshall

Estabas bastante cerca - http://jsfiddle.net/7mfLF/1/

Tenga en cuenta que no tiene que repetir el document.ready parte - declarar una vez y listo.

Claro que puede usar Bootstrap y jQuery UI, pero son REALMENTE pesados ​​y para este tipo de tareas pequeñas no es realmente la mejor práctica incluir una biblioteca de 130Kb.

$(document).ready(function(){
    $("li").click(function() {
        $("li div").hide();
        $(this).children("div").fadeIn("slow");
    });
});

Respondido el 12 de junio de 12 a las 18:06

Lo siento, pero podría ser más específico. ¿Todavía necesito el margen y de qué se trata el li y esto, qué cambio en mis cosas? - user1451848

Hice las pestañas de la forma en que decía el enlace, pero el problema es que no se ven igual en la vista en vivo que en la vista previa en el navegador, lo que hace que diseñar el aspecto de la página sea realmente difícil: user1451848

$(this) se refiere al elemento en el que se ha hecho clic actualmente. Y no necesita mi CSS: puede cambiarlo de acuerdo con su diseño. - Zoltán Toth

No consideraría que la interfaz de usuario de JQuery sea pesada, especialmente cuando puede personalizarla según sus necesidades y minimizarla. Además, si está utilizando Google CDN, es probable que el usuario lo tenga almacenado en caché. Sin embargo, creo que puede haber estado por encima de la cabeza del OP y esta parece una solución viable. - cristobal marshall

¿Parece que estás mostrando tus pestañas pero nunca las vuelves a ocultar?

¿Alguna vez pensaste en usar el arranque de Twitter? Podría simplificar las cosas...

http://twitter.github.com/bootstrap/javascript.html#tabs

Respondido el 12 de junio de 12 a las 18:06

Finalmente lo descubrí, saludos por ayudar, esto es lo que quería.

$(document).ready(function(){ 
    $("#tab1").click(function(){
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});                    
        $(".content-kidsclub").css({display: "block"}).animate({opacity: "1"},1000);    
    });

    $("#tab2").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});
        $(".content-computersuite").css({display: "block"}).animate({opacity: "1"},1000);   
    });

    $("#tab3").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "block"}).animate({opacity: "1"},1000);    
    });
});

Solo un simple cambio de CSS de display:none a display:block. luego un animado para desvanecerlo. aplausos por explicar que solo tengo que preparar el documento una vez que esté a mano.

Respondido el 13 de junio de 12 a las 20:06

Estoy usando este código en mis proyectos:

Pestañas simples con CSS y jQuery

Es simple, liviano porque usa JQuery puro (sin JQuery UI) y funciona en todos los navegadores que he probado. La esperanza puede ayudarte.

Respondido el 13 de junio de 12 a las 21:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.