JQuery multiple tag groups in one page

问题:

Related question where I got the scripts:

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

So as the title says I have a page that contains multiple tab groups. the tabs only work on the first group and stops working on the rest.

the script:

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

The Full 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>

Note that this is dynamic hence i can add more groups, the dynamic part is the tr that holds the form.

Thank you

回答1:

your jQuery is a bit confuse for me. try this:

$(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 at jsfiddle