具有不同 ID 的相同数据的动态选项卡

Question

我正在使用 Jquery 开发一个页面。我需要动态生成选项卡（单击“+”选项卡）。所有选项卡的内容都是相同的（很多文本框和文本区域）。现在，当我生成新选项卡时，新选项卡应该包含此内容，但具有不同的 id..（附加计数器即可）。请帮忙。

Answer 1

1. 创建 1 个选项卡内容模板。使用CSS隐藏它。
2. 您的选项卡标题应该具有相同的类，例如 class='tab-header'。
3. 当您单击 + 时，创建新的选项卡标题。计算当前 .tab-header 的长度，并在刚刚为 id 创建的新选项卡中使用结果，例如 attr('id','tab'+counter)
4. 同时，克隆通过 clone() 方法创建第 1 点上的模板，并给出类名 addClass('tab-content tab-'+counter); 或者只给出 id attr('id','tab-content-'+counter);

Answer 2

http://jsfiddle.net/jesseatkinson/EZgkN/6/

HTML

<button>CLICK ME TO ADD A NEW TAB!</button>
<ul>
    <li id="tab">This is a tab.</li>
</ul>

JS

var i = 0;

$('button').click(function () {
    var tabId = $('#tab').attr('id'),
        tabContent = $('#tab').html();

    tabId += i;
    $('ul').append('<li id=' + tabId + '>' + tabContent + " " + tabId + '</li>');
    i += 1;
});