动态添加选项卡，单击按钮答案

【问题标题】：dynamically adding a tab, on button click动态添加选项卡，单击按钮
【发布时间】：2013-07-09 12:46:06
【问题描述】：

HTML代码：

<div id="container-1">
    <ul>
        <li><a href="#fragment-1">List</a></li>
        <li><a href="#fragment-2">List</a></li>
        <li><a href="#fragment-3">List</a></li>
    </ul>
    <div id="fragment-1">one</div>
    <div id="fragment-2">two</div>
    <div id="fragment-3">three</div>
</div>
<button id="add_tab">Add Tab</button>

我想在按钮 onclick 事件上再添加一个选项卡“fragment-4”。此选项卡 div 不在 <div id="container-1"> 范围内。我正在使用以下 java 脚本：

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

        $('#add_tab').click( function(){
            var ul = tabs.find( "ul" );
            $( "<li><a href='#fragment-4'>Call Detials</a></li>" ).appendTo( ul );
            tabs.tabs( "refresh" );
            tabs.tabs('select', 1);
        });
  });

使用此功能，我可以获得动态选项卡，但不能获取此选项卡中写入的内容。所以请建议我该怎么做？

【问题讨论】：

你还需要添加内容div $( '<div id="fragment-4">four</div>' ).appendTo( tabs ); demo: jsfiddle.net/arunpjohny/hdKp5/1
您可以使用 appendTo('#container-1') 添加一个 ID 为 #fragment-4 的 div。如果要加载内容，可以在代码中添加隐藏的 div 或使用 Ajax 请求加载内容。

标签： javascript jquery html

【解决方案1】：

除了添加li，您还需要在内容中添加div。 div 的 ID 应与 li 元素的 href 属性匹配。

类似这样的：

编辑：添加动态标签 ID

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

    $('#add_tab').click(function () {
        tabCounter++;

        var ul = tabs.find("ul");
        $('<li><a href="#fragment-' + tabCounter + '">Call Detials</a></li>').appendTo(ul);
        tabs.append('<div id="fragment-' + tabCounter + '">Hello there ' + tabCounter + '</div>');
        tabs.tabs("refresh");
        tabs.tabs('select', 1);
    });
});

Working Demo

【讨论】：

那是因为你得到了几个具有相同 ID 的元素，所以很容易添加一个计数器来使所有 ID 唯一，但原始问题中没有指定
@mishik 这是一个很好的建议，并且 OP 确实有一个名为“tabCounter”的变量，可以用于制作唯一 ID，所以我更新了我的答案以使用动态 ID。您现在可以根据需要添加任意数量的标签 :)

【解决方案2】：

Demo

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

    $('#add_tab').click( function(){
        var ul = tabs.find( "ul" );
        var current_idx = ul.find("li").length + 1; // Get correct index for id
        $("<li><a href='#fragment-" + current_idx + "'>Call Details</a></li>" ).appendTo( ul );
        tabs.append( $('#callDetail') );
        tabs.tabs("refresh");
        tabs.tabs("select", 1);
    });
});

【讨论】：

mishik，我看到了你的演示，但是我的 div 内容是一个带有一些操作的大表单，所以我怎样才能在 div 中获取这些内容。
添加新标签后，您可以通过 append() 或 html() 方法更改 $("#fragment-4") 的内容。
但是，如何通过 append() 或 html() 添加 html 表单？
form 也是你可以做的标签：your_elem.html("<form><input type='submit' value='submit me' /></form>");

【解决方案3】：

除了添加li，您还需要添加一个内容 div。

$(document).ready(function() {
    var tabs = $("#container-1").tabs();
    var tabCounter = tabs.find('ul').first().children().length;

    $('#add_tab').click( function(){
        var ul = tabs.find( "ul" );
        $( '<li><a href="#fragment-' + ++tabCounter + '">Call Detials</a></li>' ).appendTo( ul );
        $( '<div id="fragment-' + tabCounter + '">'+ tabCounter +'</div>' ).appendTo( tabs );
        tabs.tabs( "refresh" );
        tabs.tabs('select', tabCounter - 1);
    });
});

演示：Fiddle

【讨论】：

我想在动态标签内容中添加html表单，而不是一两个词，请给我建议不同的方式？
@AloNE 动态内容是怎么创建的，是从服务器加载的
@AloNE 是如何生成的
嗨，你能检查一下这个问题，让我知道stackoverflow.com/questions/66948703/…。我需要在选项卡中添加动态选项卡内容。谢谢！！

【解决方案4】：

$(document).ready(function() {

    var tabs       = $("#container-1").tabs();
    $('#add_tab').click( function(){

        var tabCounter = $('#container-1 ul li').length; // return number of tabs

        // add tabs with button
        $('#container-1').append("<div id='fragment-"+tabCounter+">Content</div>");
        $('#container-1 ul').append("<li><a href='#fragment-"+tabCounter+">"+tabCounter+"</a></li>"); 
        // Note : if you want show literal number, use something like .replace() 

        tabs.tabs("refresh");
        tabs.tabs('select', tabCounter);
    });
});

【讨论】：