twitter-bootstrap Twitter Bootstrap - 动态添加/删除标签和标签内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15349281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - Dynamically Add/Remove Tabs and Tab Content
提问by Harlow
Thanks in advance for any and all input/help/advice...
在此先感谢您的任何和所有输入/帮助/建议...
I'm using Twitter Bootstrap tabs to organize some information. The tabs will be located on a form page, and each tab will consist of a "contact form", in which the user can add multiple contacts to this page prior to submitting the whole form.
我正在使用 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>
Full code here: http://jsfiddle.net/Harlow/zQnck/34/
完整代码在这里：http: //jsfiddle.net/Harlow/zQnck/34/
I'm trying to mimic the functionality of jQuery UI's "simple manipulation" example of tabs. (http://jqueryui.com/tabs/#manipulation)
我试图模仿 jQuery UI 的“简单操作”选项卡示例的功能。( http://jqueryui.com/tabs/#manipulation)
What I currently have will add a new tab, but I want to be able to add a new, unique tab with it's own ID (continuing from the code, like "contact_01, contact_02, etc.") by clicking on the "+ Add New Contact" which will always be the last tab, but not actually have it's own tab content pane. On the other side of dynamically adding content, I want to be able to delete it by click the small "x" on each tab.
我目前拥有的将添加一个新选项卡，但我希望能够通过单击“+ 添加新联系人”将始终是最后一个选项卡，但实际上没有自己的选项卡内容窗格。在动态添加内容的另一方面，我希望能够通过单击每个选项卡上的小“x”来删除它。
--EDIT--
- 编辑 -
Just to clarify, the jQuery example trigger's a modal upon clicking "New Tab". For my purposes, I just want to create a new tab without inputting the tab name or content (the content will always be the same contact form, and I'm fine with the tab name being the same as the newly generated ID - I will have it automatically update to the contact's name later.)
只是为了澄清，jQuery 示例触发器是单击“新选项卡”时的模态。出于我的目的，我只想在不输入标签名称或内容的情况下创建一个新标签（内容将始终是相同的联系表单，并且标签名称与新生成的 ID 相同我没问题——我会的让它稍后自动更新为联系人的姓名。）
回答by Dogoku
EDIT: I reproduced the original fiddle as best as I could as both fiddles died.
编辑：我尽可能地复制了原始小提琴，因为两个小提琴都死了。
New fiddle: http://jsfiddle.net/dogoku/KdPdZ/2/
新小提琴：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>');
});
Note that I removed the hover function and instead used css
请注意，我删除了悬停功能，而是使用了 css
.nav-tabs > li:hover > span {
display:block;
}
回答by jonroberts
Dogoku's jsfiddle seems to be 404, so I put together a quick jsfiddle of the solution here: http://jsfiddle.net/xQ3f5/
Dogoku 的 jsfiddle 似乎是 404，所以我在这里整理了一个快速的 jsfiddle 解决方案：http: //jsfiddle.net/xQ3f5/
I updated this to stop the 'active' class being applied to the +Add Contact tab element, as that doesn't correspond to any of the tab elements. I'd also suggest switching the active tab to the newly created one. Here's the javascript:
我对此进行了更新，以停止将“活动”类应用于 +Add Contact 选项卡元素，因为它不对应于任何选项卡元素。我还建议将活动选项卡切换到新创建的选项卡。这是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');
});
