Question

我有一个主菜单，如果我点击任何一个选项，就会在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" );
                }
            }
        });    
      }
});    

});

我想通过添加一个标签激活并显示您的内容来获取它，所以我添加了：

   $("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});

直到没事，我最多可以显示9个标签，但是缺少你的内容，这将是Symfony的路径，例如：

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

然后我添加了以下代码将此路由加载到div中：

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

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

除了这个问题，我需要知道如何从主菜单中按下一个选项，如果有一个打开的选项卡，该内容放置活动标签并显示其内容，而不是打开另一个像（可以是相同内容的两个标签。）

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

我是新手，所以我为如何解释而道歉。

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

0 个答案: