Javascript JQuery:使用load（）将内容加载到动态选项卡中

我有一个主菜单，如果我点击其中任何一个选项，就会在一个div中动态创建一个选项卡。因此，我可以在主菜单中创建多达九个不同选项的选项卡。 我用于创建和删除选项卡的javascript代码如下所示：

$(document).ready(function () {

            $("#tabs").tabs();
            var tabCounter = 1;
            var cont =1;

            var num_tabs = $("#tabs ul li").length +1,
            tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
            tabs = $( "#tabs" ).tabs();

        // actual addTab function: adds new tab using the input from the form above
        function addTab() {
            var label = tabTitle || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
            tabContentHtml = "Tab " + tabCounter + " content.";
            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'></div>" );
            tabs.tabs( "refresh" );
            cont++;

        }

         // close icon: removing the tab on click
        tabs.delegate( "span.ui-icon-close", "click", function() {
            var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
            cont--;
        });

        tabs.bind( "keyup", function( event ) {
            if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
                var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
                $( "#" + panelId ).remove();
                tabs.tabs( "refresh" );
            }
        });



       $(".menuitem a").click(function(event) {
        event.preventDefault();

      if(cont<=9)
      { 
        tabTitle = $(this).attr("title"),
        addTab();
        $("#tabs-"+tabCounter).load($(this).attr('href'));

        tabCounter++;
        $("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
      }
      else
      {
        $( "#dialog-message" ).dialog({
            modal: true,buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });    
      }
});    

});

在这之前，我最多可以显示9个选项卡，但缺少您的内容，它将是一个路径Symfony，例如：

 <li class ="menuitem"><a href="{{path('index')}}">test</a></li>

结果是，每个选项卡的内容都会显示，但它只会自动显示。第一个选项卡不会显示警告对话框，该对话框不能显示超过9个选项卡。上面的代码会影响其他人，我无法找到解决此问题的方法

除了这个问题，我还需要知道如何从主菜单中选择一个选项，如果有一个打开的选项卡包含该内容，则可以放置活动选项卡并显示其内容，而不是像打开两个相同内容的选项卡那样打开另一个选项卡

如果有更好的方法，我想知道

---

我是一个新手，很抱歉如何解释。

你能用你的代码创建一个新的标签吗？你可以这样问，但是标签的内容是一个简单的文本，因为我不能添加完整的symfony项目，不能在标签的内容中包含显示相应小枝模板的路径。在这种情况下，如果在示例中创建为可测试的最后一个选项卡被激活，但当我使用load方法包含路径时，未能执行此操作，并且最初只有创建第一个选项卡处于活动状态，则必须按下另一个选项卡以查看其内容并使其处于活动状态。如果没有其他方法，我想知道并尝试一下。我在某个地方读到AJAX可以做到这一点，但我不知道如何做到。

 <li class ="menuitem"><a href="{{path('index')}}">test</a></li>

$("#tabs-"+tabCounter).load($(this).attr('href'));