提前感谢任何和所有输入/帮助/建议……
我正在使用Twitter Bootstrap选项卡来组织一些信息.选项卡将位于表单页面上,每个选项卡将包含一个“联系表单”,用户可以在提交整个表单之前向该页面添加多个联系人.
<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 UI的“简单操作”选项卡示例的功能.
(http://jqueryui.com/tabs/#manipulation)
我目前拥有的将添加一个新选项卡,但我希望能够通过单击“添加新”添加一个新的,唯一的选项卡及其自己的ID(从代码继续,如“contact_01,contact_02等”)联系“这将始终是最后一个选项卡,但实际上并没有它自己的选项卡内容窗格.在动态添加内容的另一边,我希望能够通过单击每个选项卡上的小“x”来删除它.
– 编辑 –
只是为了澄清,jQuery示例在单击“New Tab”时触发了一个模态.出于我的目的,我只想创建一个新选项卡而不输入选项卡名称或内容(内容将始终是相同的联系表单,我很好,选项卡名称与新生成的ID相同 – 我会让它自动更新到联系人的名字.)
解决方法
编辑：我尽可能地复制了原来的小提琴,因为两个小提琴都死了.
新小提琴：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>');
});
.nav-tabs > li:hover > span {
display:block;
}
