一个页面中的JQuery多个标记组

相关问题我在哪里获得脚本：

jQuery，一个页面上的多个选项卡组 jquery与相同的脚本冲突

所以标题说我有一个包含多个标签组的页面。 选项卡仅适用于第一组，并停止处理其余组。

剧本：

$(function() { $(".tab_content").hide(); $("ul.tabs").each(function() { $(this).find('li:first').addClass("active"); $(this).next('.panes').find('.tab_content:first').show(); }); $("ul.tabs").each(function() { $("ul.tabs li a").click(function() { alert("hello"); var cTab = $(this).closest('li'); cTab.siblings('li').removeClass("active"); cTab.addClass("active"); cTab.closest('ul.tabs').nextAll('.panes: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; }); }); 

完整的HTML：

 
 
 
 
 
 
 
 Subject:   -- Select --test(Email)test(Email)tesst(Email)     
 Subject:   -- Select -- testtesttesst       
 
 
 
 
 Scheduled (Days) 
 
 
Days
 
Weekly
 
Monthly
 
Yearly
 
 
 
 days 
 
 weekly 
 
 monthly 
 
 yearly 
 
 
    
 
 
 
 
 
 
 Subject:   -- Select -- testtesttesst       
 
 
 
 
 Scheduled (Days) 
 
 
Days
 
Weekly
 
Monthly
 
Yearly
 
 
 
 days 
 
 weekly 
 
 monthly 
 
 yearly 
 
 
    
 
  

请注意，这是动态的，因此我可以添加更多组，动态部分是保存表单的tr。

谢谢

Answer 1

你的jQuery对我来说有点混乱。 试试这个：

 $(function() { /* init: display only first tab */ $(".tab_content").hide(); $("ul.tabs li").removeClass("active"); $("ul.tabs li:first").addClass("active"); $("ul.tabs").next(".panes").find(".tab_content:first").show(); /* binding click to display another tab */ $("ul.tabs li a").click(function(event) { event.preventDefault(); $(this).parents("ul:first").next(".panes").find(".tab_content").hide(); $(this).parents("ul:first").find("li").removeClass("active"); $(this).parent().addClass("active"); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); }); }); 

..来自jsfiddle