动态添加/删除Bootstrap选项卡 - 使创建的选项卡处于活动状态

Question

动态添加/删除Bootstrap选项卡 - 使创建的选项卡处于活动状态

22

这是用于动态添加/删除Bootstrap标签页的代码片段。一切都正常，但我希望新创建的标签页处于活动状态和焦点而不是用于动态添加标签页的标签页。

这是示例代码：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;
}

- user3288556

1

请检查此链接：http://junaidqadir.com/dynamically-add-remove-and-re-number-tabs-in-twitter-bootstrap/。 - Junaid Qadir Shekhanzai

2个回答

4

我找到了另一个解决方案：

JavaScript:

$('#btnAdd').click(function (e) {
    var nextTab = $('#tabs li').size()+1;

    // create the tab
    $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

    // create the tab content
    $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

    // make the new tab active
    $('#tabs a:last').tab('show');
});

HTML:

<div class="container">
    <h1>Bootstrap Dynamic Tabs</h1>
    <div class="well">

        <a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i>Add Tab</a>
        <br><br>
        <ul class="nav nav-tabs" id="tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab1">Hello tab #1 content...</div>
        </div>
   </div>
   <a href="http://www.bootply.com/61679">Edit on Bootply</a>..
</div>

在这里演示并编辑https://www.bootply.com/61679

。

- Bai Nguyen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- khakiout · Accepted Answer

这里是一个解决方案：

查看 JSFiddle

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');
     }
})
```
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>
```

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();
});