JQuery的多个标签组

Question

相关问题，这里也有我的脚本：

jQuery, multiple tab groups on one page jquery conflict with identical scripts

因此，作为标题说我有一个包含多个选项卡组的页面。标签只能在第一组上工作，并停止对其余的工作。

脚本：

$(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：

<table id="cform" style="margin-left: 13px;"> 
<tbody><tr> 
<td> 
<form id="form1" name="form1" method="post" action=""> 
    <div> 
     <div> 
      <div> 
      <b>Subject:</b> 
            <select name="email_id[]" id="email_id_0" style="width: 350px"> 
             <optgroup label="Emails"> 
             <option value="">-- Select --</option><option value="1">test(Email)</option><option value="2">test(Email)</option><option value="3" selected="">tesst(Email)</option>     
             </optgroup> 
             <optgroup label="SMS"> 
            </optgroup> 
            </select>    <br> 
       <b>Subject:</b> 
        <select name="email_id[]" id="email_id_1" style="width: 350px;margin-right: 5;"> 
         <optgroup label="Emails"> 
         <option value="">-- Select --</option> 
         <option value="1">test</option><option value="2">test</option><option value="3">tesst</option>      </optgroup> 
         <optgroup label="SMS"> 
               </optgroup> 
        </select> 
       <center> <input type="button" class="btn-link right" value="Add More" onclick="javascript:addRows();"></center> 
      </div>    
     </div> 
    </div>  

    <br> 
    <div style=" margin-top: 25px; "> 
     <b>Scheduled (Days)</b> 
     <br> 
     <ul class="tabs"> 
      <li class=""><a href="#tab1">Days</a></li> 
      <li class="active"><a href="#tab2">Weekly</a></li> 
      <li class=""><a href="#tab3">Monthly</a></li> 
      <li class=""><a href="#tab4">Yearly</a></li> 
     </ul> 
     <div class="panes"> 
      <div id="tab1" class="tab_content" style="padding-top: 20px; display: none;"> 
       days 
      </div> 
      <div id="tab2" class="tab_content" style="padding-top: 20px; display: block;"> 
       weekly 
      </div> 
      <div id="tab3" class="tab_content" style="padding-top: 20px; display: none;"> 
       monthly 
      </div> 
      <div id="tab4" class="tab_content" style="padding-top: 20px; display: none;"> 
       yearly 
      </div> 
     </div> 
     <br> 
     <input type="hidden" name="rows_ctr" id="rows_ctr" value="1"> 
     <input type="hidden" name="gid" id="" value="1"> 
     <input type="submit" value="Save" class="btn-link right"> 
    </div> 
</form> 
</td> 
</tr><tr><td><form> 

     <div> 
      <div> 
       <div> 
       <b>Subject:</b> 
        <select name="email_id[]" id="email_id_1" style="width: 350px;margin-right: 5;"> 
         <optgroup label="Emails"> 
         <option value="">-- Select --</option> 
         <option value="1">test</option><option value="2">test</option><option value="3">tesst</option>      </optgroup> 
         <optgroup label="SMS"> 
               </optgroup> 
        </select> 


       <center> <input type="button" class="btn-link right" value="Add More" onclick="javascript:addRows();"></center> 
       </div> 
      </div>   
     </div>  
    <br> 
    <div style=" margin-top: 25px; "> 
     <b>Scheduled (Days)</b> 
     <br> 
     <ul class="tabs"> 
      <li class="active"><a href="#tab5">Days</a></li> 
      <li><a href="#tab6">Weekly</a></li> 
      <li><a href="#tab7">Monthly</a></li> 
      <li><a href="#tab8">Yearly</a></li> 
     </ul> 
     <div class="panes"> 
      <div id="tab5" class="tab_content" style="padding-top: 20px; display: block;"> 
       days 
      </div> 
      <div id="tab6" class="tab_content" style="padding-top: 20px; display: none;"> 
       weekly 
      </div> 
      <div id="tab7" class="tab_content" style="padding-top: 20px; display: none;"> 
       monthly 
      </div> 
      <div id="tab8" class="tab_content" style="padding-top: 20px; display: none;"> 
       yearly 
      </div> 
     </div> 
     <br> 
     <input type="hidden" name="rows_ctr" id="rows_ctr" value="1"> 
     <input type="hidden" name="gid" id="" value="1"> 
     <input type="submit" value="Save" class="btn-link right"> 
    </div> 
</form></td></tr> 

</tbody></table> 

注意，这是动态的，因此，我可以添加更多的组，动态部分是持有形式TR。

谢谢

Answer 1

你的jQuery对我有点困惑。试试这个：在jsfiddle

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

..see