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

Question

我正在使用Jquery的页面上工作。我需要动态生成选项卡（onclicking'+'选项卡）。所有选项卡的内容都是相同的（大量文本框和textareas）。现在，当我生成新的标签时，新标签应该有这个内容，但有不同的ID ..（追加计数器会做）.PLease help。

Answer 1

1. 创建1个选项卡内容的模板。用css隐藏它。
2. 您的标签标题应该具有相同的类别，例如class='tab-header'。
3. 当你点击+时，创建新的标签页眉。算当前的.tab报头的长度，并使用该结果在被在相同时间为ID例如attr('id','tab'+counter)
4. 刚刚创建新标签，通过clone()方法克隆上点1的模板，并给予类名addClass('tab-content tab-'+counter);或只是给它编号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; 
});