jQuery, múltiples grupos de pestañas en una sola página

Question

Estoy usando un buen ejemplo de pestañas simples de Soh Tanaka. http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

Estoy tratando de poner varios grupos de pestañas en la misma página pero aún usar las mismas clases para cada grupo de pestañas. Estoy creando dinámicamente el contenido de las pestañas, por lo que no es posible crear nuevas clases para cada grupo de pestañas.

¿Cómo utilizo las mismas clases, la misma jQuery para los diferentes grupos de pestañas? Sé que existe el método .each() disponible en jQuery, pero estoy teniendo problemas para tratar de encontrar los lugares correctos para ponerlo en jQuery. Cualquier ayuda es muy apreciada.

Gracias de antemano.

Answer 1

En los comentarios en la entrada del blog que vinculó, hay una discusión sobre eso. Se vincula a una demostración aquí: http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

En esa demostración, hay un cambio en la forma en que se accede a las pestañas.

$("div[class^='simpleTabs']").simpleTabs(); //Run function on any div with class name of "Simple Tabs" 

Esto se hace envolviendo sus secciones con pestañas en un div con una clase de simpleTabs

Answer 2

utilicé el ejemplo que nos ha facilitado y ha añadido un segundo grupo de pestañas. Puede verlo aquí: http://jsfiddle.net/eSHdb/1/

Más allá de eso, creo que necesitamos más detalles de lo que está intentando con algún código de ejemplo que haya probado y problemas específicos. Tenga en cuenta que mi ejemplo NO es realmente bonito, pero podría ser de estilo.

Answer 3

Pellizcando el código de la página de ejemplo, por Soh Tanaka que se refiere en su artículo:

$(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; 
}); 

}); 

El bit crítico es arreglar el código que solamente se refiere al grupo pestaña actual a los efectos de la conmutación entre pestañas. Esto se logra asegurándose de que cuando no se desee el contexto global, solo el grupo local, cambiemos el selector. Cuando se hace referencia a un conjunto de pestañas sobre su contenido, el problema es cómo hacer coincidir una con la otra, esto puede hacerse con algún sistema común de identificación, o si se supone que las pestañas preceden a su contenido, sin superposición, entonces podemos simplemente encuentre el siguiente tab_container a lo largo de un conjunto de pestañas.

En primer lugar, la inicialización:

$(".tab_content").hide(); 

fina, que desea ocultar todos ellos.

$("ul.tabs li:first").addClass("active"); 
$(".tab_content:first").show(); 

No es bueno, esto se refiere a todos los grupos de pestañas en la página, debe ser específico.

$("ul.tabs").each(function() { 
    $(this).find('li:first').addClass("active"); 
    $(this).nextAll('.tab_container:first').find('.tab_content:first').show(); 
}); 

.click() El evento comienza bien, obligando a todos los ul.tabs li está muy bien. En el interior necesita los selectores cambiados.

$("ul.tabs li").click(function() { 
    var cTab = $(this).closest('li'); 
    cTab.siblings('li').removeClass("active"); 
    cTab.addClass("active"); 
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide(); 

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active ID content 

    return false; 
}); 

La última sección con el activeTab ya está bien, sólo tenga cuidado de no volver a utilizar los ID.

Ver demostración:http://jsfiddle.net/uyvUZ/1/

visualmente más fácil, pero diferente de demostración:http://jsfiddle.net/uyvUZ/2/