Twitter Bootstrap – 动态添加/删除选项卡和选项卡内容

提前感谢任何和所有输入/帮助/建议……

我正在使用Twitter Bootstrap选项卡来组织一些信息。 选项卡将位于表单页面上，每个选项卡将包含一个“联系表单”，用户可以在提交整个表单之前向该页面添加多个联系人。

 
 
Joe Smithx
 
Molly Lewisx 
 
+ Add Contact
 
 
 
Contact Form: Joe Smith
 
Contact Form: Molly Lewis
 
  

完整代码： http ： //jsfiddle.net/Harlow/zQnck/34/

我试图模仿jQuery UI的“简单操作”选项卡示例的function。 （ http://jqueryui.com/tabs/#manipulation ）

我目前所拥有的将添加一个新选项卡，但我希望能够通过单击“+添加”添加一个新的，唯一的选项卡及其自己的ID（从代码继续，如“contact_01，contact_02等”）新联系人“这将始终是最后一个选项卡，但实际上没有它自己的选项卡内容窗格。 在动态添加内容的另一边，我希望能够通过单击每个选项卡上的小“x”来删除它。

– 编辑 –

只是为了澄清，jQuery示例在单击“New Tab”时触发了一个模态。 出于我的目的，我只想创建一个新选项卡而不输入选项卡名称或内容（内容将始终是相同的联系表单，我很好，选项卡名称与新生成的ID相同 – 我会让它自动更新到联系人的名字。）

Answer 1

编辑：我尽可能地复制了原来的小提琴，因为两个小提琴都死了。

新小提琴： http ： //jsfiddle.net/dogoku/KdPdZ/2/

 $(".nav-tabs").on("click", "a", function(e){ e.preventDefault(); $(this).tab('show'); }) .on("click", "span", function () { var anchor = $(this).siblings('a'); $(anchor.attr('href')).remove(); $(this).parent().remove(); $(".nav-tabs li").children('a').first().click(); }); $('.add-contact').click(function(e) { e.preventDefault(); var id = $(".nav-tabs").children().length; //think about it ;) $(this).closest('li').before('
New Tabx
'); $('.tab-content').append('
Contact Form: New Contact '+id+'
'); }); 

请注意，我删除了hoverfunction，而是使用了css

 .nav-tabs > li:hover > span { display:block; } 

Answer 2

Dogoku的jsfiddle似乎是404，所以我在这里整理了一个快速的解决方案： http ： //jsfiddle.net/xQ3f5/

我更新了这个以停止应用于+ Add Contact选项卡元素的’active’类，因为它不对应于任何tab元素。 我还建议将活动标签切换到新创建的标签。 这是javascript：

 $(".nav-tabs").on("click", "a", function(e){ e.preventDefault(); if(this.id == "add-contact"){return false;} $(this).tab('show'); }) .on("click", "span", function () { var anchor = $(this).siblings('a'); $(anchor.attr('href')).remove(); $(this).parent().remove(); $(".nav-tabs li").children('a').first().click(); }); $('#add-contact').click(function(e) { e.preventDefault(); var id = $(".nav-tabs").children().length; //think about it ;) $(this).closest('li').before('
New Tab
'); $('.tab-content').append('
Contact Form: New Contact '+id+'
'); $("#contact_tab_"+id+" a").tab('show'); });