6

在此先感谢您的任何和所有输入/帮助/建议...

我正在使用 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 示例触发器是单击“新选项卡”时的模式。出于我的目的，我只想创建一个新选项卡而不输入选项卡名称或内容（内容将始终是相同的联系表单，并且选项卡名称与新生成的 ID 相同我很好 - 我会让它稍后自动更新为联系人的姓名。）

4

2 回答 2

13

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

新小提琴：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;
}
于 2013-03-11T22:03:10.890 回答
2

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

我更新了它以停止将“活动”类应用于 +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');
});
于 2013-09-23T16:23:40.220 回答