Javascript 在jquery ui选项卡中创建动态选项卡

我最近在做一个关于HTML和jQuery的项目。我现在想要实现的是，在单击按钮时创建带有特定数据的动态选项卡

我的jQueryUI选项卡代码是

$(document).ready(function() {
        var $tabs = $("#container-1").tabs();
            var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
            tabCounter = 2;

        $('#add_tab').click( function(){   
             var label = 'New',
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
            tabContentHtml = 'hi';
            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        });
        $('#new').click( function(){
            $tabs.tabs('select', 2);
        });

    }); 

---

我对jQueryUI不太在行。如何解决此问题？

问题出在您的脚本上。请尝试此方法

$(document).ready(function() {
        var tabs = $("#container-1").tabs();
            var tabCounter = 1;

        $('#add_tab').click( function(){
            var ul = tabs.find( "ul" );
            $( "<li><a href='#newtab'>New Tab</a></li>" ).appendTo( ul );
            $( "<div id='newtab'>Name :<input type='text'></input></div>" ).appendTo( tabs );
            tabs.tabs( "refresh" );
            tabs.tabs('select', 1);
        });


    }); 

$（文档）.ready（函数（）{
var tabs=$（“#容器-1”）.tabs（）；
var-tabCounter=1；
$（“#添加选项卡”）。单击（函数（）{
var ul=tabs.find（“ul”）；
$（“
”）附录（ul）；
$（“名称：”）.appendTo（制表符）；
制表符。制表符（“刷新”）；
tabs.tabs（'select'，1）；
});
}); 

代码中唯一的问题是，您在开始时定义了

$tabs

，后来调用了

tabs

，但没有美元符号。我刚刚删除了dollar sine，它按照您预期的方式工作（注意第二行的var选项卡定义）。。。我还将代码添加到了

$（文档）.ready（函数（）{
var tabs=$（“#容器-1”）.tabs（）；
var tabTemplate=“
删除选项卡”
”，
tabCounter=2；
$（“#添加_选项卡”）。单击（函数（）{
变量标签='新'，
id=“tabs-”+tabCounter，
li=$（tabTemplate.replace（/#\{href\}/g，“#”+id）。replace（/#\{label\}/g，label）），
tabContentHtml='hi'；
tabs.find（“.ui tabs nav”）.append（li）；
tabs.append（“”+tabContentHtml+”
”）；
制表符。制表符（“刷新”）；
tabCounter++；
});
$（“#新建”）。单击（函数（）{
$tabs.tabs（'select'，2）；
});
}); 

ReferenceError: tabs is not defined
http://localhost:3000/
Line 38

$(document).ready(function() {
        var tabs = $("#container-1").tabs();
            var tabCounter = 1;

        $('#add_tab').click( function(){
            var ul = tabs.find( "ul" );
            $( "<li><a href='#newtab'>New Tab</a></li>" ).appendTo( ul );
            $( "<div id='newtab'>Name :<input type='text'></input></div>" ).appendTo( tabs );
            tabs.tabs( "refresh" );
            tabs.tabs('select', 1);
        });


    }); 

$(document).ready(function() {
    var tabs = $("#container-1").tabs();
        var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
        tabCounter = 2;

    $('#add_tab').click( function(){   
        var label = 'New',
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = 'hi';
        tabs.find( ".ui-tabs-nav" ).append( li );
        tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
        tabs.tabs( "refresh" );
        tabCounter++;
    });
    $('#new').click( function(){
        $tabs.tabs('select', 2);
    });

});