0

スクリプトを入手した関連する質問:

jQuery、1ページの複数のタブグループ 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:

<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 です。

ありがとうございました

4

1 に答える 1

0

あなたの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 を参照

于 2013-05-06T21:29:44.480 に答える