在 jquery-ui 选项卡中创建动态选项卡答案

【问题标题】：Create Dynamic tab in jquery-ui tab在 jquery-ui 选项卡中创建动态选项卡
【发布时间】：2020-04-07 16:54:53
【问题描述】：

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

我的 JQuery-UI 标签代码是

$(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);
        });

    });

我的 HTML 文件

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">List</a></li>
    </ul>

    <div id="fragment-1">

    </div>


</div>

<button id="add_tab">Add Tab</button>

当我点击萤火虫控制台中的“添加”按钮时，出现错误：

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

我不太擅长 jquery-ui。我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

问题出在你的脚本上。所以试试这个

$(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);
        });


    });

【讨论】：

【解决方案2】：

您的代码中唯一的问题是您在开始时定义了$tabs，后来在没有美元正弦的情况下调用了tabs。我刚刚删除了美元正弦，它按您预期的方式工作（注意第二行的 var tabs 定义）......我还向jsfiddle 添加了代码。

$(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);
    });

});

【讨论】：