jQuery Bootstrap 动态选项卡（添加和删除）

Question

我的代码使用户能够在 Bootstrap UI 选项卡中添加和删除选项卡。我已经成功了，是的，效果很好。

唯一的问题是它不对选项卡名称进行排序。例如有这样的标签：Tab 1、Tab 2、Tab 3、Tab 4、Tab 5

所以当我删除 Tab 2 时，Tab 3 将是 Tab 2 然后 Tab 4 将是 Tab 3 等等..

另外，当我删除一个选项卡时，一个活动选项卡会显示选项卡 1。（请在 jsfiddle 中查看）

我的两个问题有什么解决办法吗？

JSFiddle 链接：https://jsfiddle.net/cnycmLq0/

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>
                <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
            </p>
            <!-- Nav tabs -->
            <ul id="tab-list" class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
            </ul>

            <!-- Tab panes -->
            <div id="tab-content" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
            </div>
        </div>
    </div>
</div>

JS：

    $(document).ready(function() {
        var tabID = 1;
        $('#btn-add-tab').click(function() {
            tabID++;
            $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>'));
            $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
        });
        $('#tab-list').on('click', '.close', function() {
            var tabID = $(this).parents('a').attr('href');
            $(this).parents('li').remove();
            $(tabID).remove();

            //display first tab
            var tabFirst = $('#tab-list a:first');
            tabFirst.tab('show');
        });

        var list = document.getElementById("tab-list");
    });

Answer 1

我刚刚写了一个function 来重置您的tabs 并更改它的text。主要部分是将button html 存储在var 中，并将button html 和tabID 作为全局变量。您可以在 remove 事件上调用此 function。

var button='<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;
function resetTab(){
    var tabs=$("#tab-list li:not(:first)");//get all tabs except first tab
    var len=1;//we do not want to reset 1st tab
    $(tabs).each(function(k,v){
        len++;//increment it
        $(this).find('a').html('Tab ' + len + button); //replace each tabs html with latest index and button html.
    })
    tabID--;//decrement tabs count
}

Complete solution in Fiddle