Question

我有一组标签，其中每个标签容器中还有另一组标签。当我向顶级选项卡动态添加选项卡时，它还会为每个第二级选项卡添加选项卡。我知道为什么..它在顶级选项卡的id下面的.ui-tabs-nav附加一个标签。当它执行此操作时，它还会附加属于同一id div的每个后续.ui-tabs-nav。您如何才能将选项卡仅添加到顶级选项卡而不是子选项卡？

这是基本结构：

<div id="CustomerTabs">
<ul>
    <li><a href="#tabs-1"><div class="TabDiv"><div class="TabDivName">Customer Search</div></div></a> </li>
    <li><a href="#tabs-2"><div class="TabDiv"><div class="TabDivName">Customer Profile</div></div></a> </li>
</ul>


<div id="tabs-1">


            <div id="CustomerSystemTabs1">
                <ul>
                    <li><a href="#CustTabs1-1"><div class="TabDiv"><div class="TabDivName">System 1</div></div></a> </li>
                    <li><a href="#CustTabs1-2"><div class="TabDiv"><div class="TabDivName">System 2</div></div></a> </li>
                </ul>


                <div id="CustTabs1-1">
                        <!-- Stuff Goes Here -->
                </div>

                <div id="CustTabs1-2">
                         <!-- Stuff Goes Here -->
                </div>


            </div> 

</div> 

    <div id="tabs-2">


            <div id="CustomerSystemTabs2">
                <ul>
                    <li><a href="#CustTabs2-1"><div class="TabDiv"><div class="TabDivName">System 1</div></div></a> </li>
                    <li><a href="#CustTabs2-2"><div class="TabDiv"><div class="TabDivName">System 2</div></div></a> </li>
                </ul>


                <div id="CustTabs2-1">
                        <!-- Stuff Goes Here -->
                </div>

                <div id="CustTabs2-2">
                        <!-- Stuff Goes Here -->
                </div>


            </div> 

</div>

这是我添加标签的方式：

        var tabTitle = $( "#tab_title" ),
        tabContent = $( "#tab_content" ),
        tabTemplate = '<li><a href="#{href}"><div class="TabDiv"><div class="TabDivName">#{label}</div><div class="TabDivClose"></div></div></a></li>',
        tabCounter = 2;

    var tabs = $( "#CustomerTabs" ).tabs();


    function AddCustomerTab(TabHTML,TabCaption){
        var label = TabCaption || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),

            tabContentHtml = TabHTML || "Tab " + tabCounter + " content.";

        tabs.find( ".ui-tabs-nav" ).append( li );
        tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
        tabs.tabs( "refresh" );


        tabCounter++;


    }

Answer 1

你是说这个意思吗？ JSFiddle

您的代码行

tabs.find( ".ui-tabs-nav" ).append( li );

选择所有jQuery UI选项卡，并将li元素（新选项卡）附加到所有现有选项卡。

在小提琴中，我将新标签添加到$("#CustomerTabs ul:first")，只会将其添加到顶级标签。

JqueryUI选项卡，向主选项卡添加选项卡还会向子选项卡添加选项卡

1 个答案: