在Bootstrap中动态添加/删除选项卡 - 激活创建的选项卡 [英] Add / Remove Tabs Dynamically in Bootstrap - Make created tab active

问题描述

以下是动态添加/删除引导选项卡的代码段。一切正常，但我希望新创建的标签处于活动状态，而不是用于动态添加标签的标签。

Here is the snippet to dynamically add / remove bootstrap tabs. Everything works fine, but I would like newly created tab to be active and in focus rather than the tab used to dynamically add a tab.

这是小提琴： 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;
}

推荐答案

这是一个解决方案：

1. code>标签（'show'）仍然在添加联系人点击了navlink。即使调用了show tab函数，也没有显示任何选项卡内容，因为它没有链接到它的现有内容。我做的是添加一个条件来停止激活该标签。

1. The tab('show') is still being called when the "Add Contact" navlink is clicked. Even though the show tab function is called, no tab content is being displayed because it has no existing contents linked to it. What I did is to add a condition to stop activating that tab.

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

我还将 data-toggle =tab属性移除到添加联系人navlink。出于某种原因，它会激活添加联系人标签（如果有）。

I also removed the data-toggle="tab" attribute to the "Add Contact" navlink. For some reason, it activates the "Add Contact" tab if it's there.

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

添加新标签后，触发点击，以便调用选项卡（'show'）函数。 （参见1 ）

Upon adding a new tab, trigger the click of the new tab so that the tab('show') function will be called. (see 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();
});

这篇关于在Bootstrap中动态添加/删除选项卡 - 激活创建的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！