javascript - 在 Bootstrap 中动态添加/删除选项卡 - 使创建的选项卡处于事件状态

Question

这是动态添加/删除 Bootstrap 选项卡的代码片段。一切正常，但我希望新创建的选项卡处于事件状态并处于焦点状态，而不是用于动态添加选项卡的选项卡。

这是 fiddle :http://jsfiddle.net/isherwood/F33Av/4/

这是有问题的代码:

HTML:

<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>

JS:

$(".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:

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.nav-tabs > li {
    position:relative;    
}

.nav-tabs > li > a {
    display:inline-block;
}

.nav-tabs > li > span {
    display:none;
    cursor:pointer;
    position:absolute;
    right: 6px;
    top: 8px;
    color: red;
}

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

Answer 1

这是一个解决方案:

See JSFiddle

1. 单击“添加联系人”导航链接时，仍会调用 tab('show')。即使调用了显示选项卡函数，也不会显示任何选项卡内容，因为它没有链接到的现有内容。我所做的是添加一个条件来停止激活该选项卡。

   $(".nav-tabs").on("click", "a", function (e) {
        e.preventDefault();
        if (!$(this).hasClass('add-contact')) {
            $(this).tab('show');
        }
   })
   

2. 我还删除了“添加联系人”导航链接的 data-toggle="tab" 属性。由于某种原因，它会激活“添加联系人”选项卡(如果有)。

   <li><a href="#" class="add-contact">+ Add Contact</a></li>
   

3. 添加新选项卡后，触发新选项卡的点击，从而调用tab('show')函数。 (参见 1)

   $('.add-contact').click(function (e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; //think about it ;)
        var tabId = 'contact_' + id;
        $(this).closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span>x</span></li>');
        $('.tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
   
        // add this
        $('.nav-tabs li:nth-child(' + id + ') a').click();
   });