Twitter的引导 - 动态添加/删除选项卡和选项卡内容

Question

预先感谢任何和所有输入/咨询/建议......

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

<div class="container"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li> 
     <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li> 
     <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div> 
     <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div> 
    </div> 
</div> 

全部代码在这里：http://jsfiddle.net/Harlow/zQnck/34/

我试图模仿标签的jQuery用户界面的“简单操作”的例子的功能。我现在要添加一个新标签，但是我希望能够添加一个新的，唯一的标签和自己的ID（从代码继续，比如“contact_01，contact_02等等”）。 ）通过点击“+添加新联系人”这将始终是最后一个选项卡，但实际上没有它自己的选项卡内容窗格。在动态添加内容的另一方面，我希望能够通过点击每个标签上的小“x”来删除它。

- 编辑 -

只是为了澄清，jQuery的例子触发器的一个模式在单击“新建选项卡”。对于我的目的，我只是想创建一个新的标签，而不输入标签名称或内容（内容将始终是相同的联系表单，并且我很好，标签名称与新生成的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('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');   
     $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>'); 
}); 

注意，我删除了悬停功能，转而使用CSS

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

Answer 2

Dogoku的的jsfiddle好像是404，所以我放在一起的解决方案的快速的jsfiddle这里：http://jsfiddle.net/xQ3f5/

我更新了这个以停止应用到+添加联系人选项卡元素的“活动”类，因为这不合作与任何标签元素相对应。我也建议将活动标签切换到新创建的标签。这里的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('<li id="contact_tab_'+id+'"><a href="#contact_'+id+'">New Tab</a></li>');   
     $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>'); 
     $("#contact_tab_"+id+" a").tab('show'); 
});