JQuery, multiple groups of tabs on one page

Question

I use a nice simple tab from Soh Tanaka. http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

I am trying to put several groups of tabs on the same page, but use the same classes for each group of tabs. I am dynamically creating content for tabs, so creating classes for each group of tabs is out of the question.

How to use the same classes, the same jQuery for different groups of tabs? I know that there is a .each () method available in jQuery, but I am having trouble finding the right places to put it in jQuery. Any help is appreciated.

Thanks in advance.

Answer 1

, , . : http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

.

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

div simpleTabs

Answer 2

Soh Tanaka, :

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

});

, . , , , , . , , , , , tab_container .

:

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

, .

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

, , .

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

.click() , ul.tabs li . .

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

activeTab , , ID.

. : http://jsfiddle.net/uyvUZ/1/

, -: http://jsfiddle.net/uyvUZ/2/

Answer 3

I used the example you provided and added a second group of tabs. You can see it here: http://jsfiddle.net/eSHdb/1/

In addition, I think we need more details about what you are trying to use in some sample code that you tried, and about specific problems. Please note that my example is NOT very good, but it could be created.