Add / Remove Tabs Dynamically in Bootstrap - Make created tab active(在 Bootstrap 中动态添加/删除选项卡 - 使创建的选项卡处于活动状态)

本文介绍了在 Bootstrap 中动态添加/删除选项卡 - 使创建的选项卡处于活动状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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. tab('show') 仍然在添加联系人"时被调用.导航链接被点击.即使调用了显示选项卡功能，也不会显示选项卡内容，因为它没有链接到它的现有内容.我所做的是添加一个条件来停止激活该选项卡.

  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" 属性.导航链接.出于某种原因，它会激活添加联系人".选项卡(如果存在).

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

  • 添加新标签后，触发新标签的click，调用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();
});

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