jQuery、Bootstrap 单击删除选项卡

Question

我构建了一些功能来允许用户添加和删除选项卡。 “添加”功能按照我想要的方式工作，只有 5 个选项卡可见，其余的将显示在下拉列表中。 参见jsfiddle

添加“删除”功能时遇到一些问题。选项卡已正确删除，但现在出现问题:

1. 如果我添加了 6 个以上的选项卡(例如 12 个)，并且单击按钮删除当前选定的选项卡(有效)，则会在第一个下拉元素上设置“.active”类，使其取消-可点击？我尝试过以下方法:

   $('.dropdown ul #tab6').parent().removeClass('active');

2. 我也不确定如何在删除标签时更新标签上的数字。例如，我有设备 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 并且我删除了设备/选项卡 9 如何让选项卡仍然按顺序读取([1 , 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 而不是 [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12])？<
3. 如果第 2 点是处理此问题的正确方法，您有什么意见吗？

我真的很困惑，因此我们将非常感谢任何帮助。

编辑:

我意识到选项卡的 ID 并不重要，只要它们是唯一的即可。我已经更新了fiddle ，它添加了一个简单的 .each() 来更新选项卡选择中的文本。

当我从下拉列表中删除选项卡时，我仍然遇到选择第一个下拉列表的问题，有人可以帮忙解决吗？

Answer 1

另一种方式。这应该就是您要找的。

HTML(稍作修改)

<script id="tabTemp" type="text/x-jquery-tmpl"> 
    <div class='tab-pane' id='tab${device}'>
        This is device number <span class="dev-nr"></span>
        <p>Random string (to see tabs difference): <b>${randomStr}</b></p>
        <div>
            <a href="#" class="btn btn-danger btn-remove btnRmv">Remove device</a>
        </div>
    </div>
</script>
<script id="navTemp" type="text/x-jquery-tmpl"> 
    <li class="li-tab-toggle">
        <a href="#tab${device}" class="tab-toggle" data-toggle="tab">
            Device <span class="dev-nr"></span>
        </a>
    </li>
</script>
<script id="dropTemp" type="text/x-jquery-tmpl"> 
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            More Devices <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" id="drop"></ul>
    </li>
</script>

<a href="#" class="btn btn-primary" id="btnAdd">Add device</a>
<ul class="nav nav-tabs" id="tabs">
    <li class="li-tab-toggle active"><a class="tab-toggle" href="#tab1" data-toggle="tab">Device 1</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Device 1 content</div>
</div>

脚本:

var maxTabs = 4, index = 1;

$('#btnAdd').click(function(e){
    e.preventDefault();
    index++;
    $('.tab-toggle').length !== maxTabs || 
        $('#tabs').append($.tmpl(dropTemp))
        .find('#drop').append($('.li-tab-toggle:last').removeClass('active'));

    $.tmpl(navTemp, {"device" : index}).insertAfter('.li-tab-toggle:last');
    $.tmpl(tabTemp, {"device" : index}).appendTo('.tab-content');
    $('.li-tab-toggle:last a').tab('show');
    updateTabs();
});

$(document).on('click', '.btnRmv', function(e){
    var tabs = $('.li-tab-toggle').length,
        nav = $('.li-tab-toggle.active');

    nav.parent('#tabs').find('#drop li:first').insertBefore('#tabs .dropdown');
    tabs !== maxTabs+1 || $('#drop li').insertBefore('#tabs .dropdown').siblings('.dropdown').remove();

    $('a', nav.is('li:last') ? nav.prev() : nav.next()).tab('show');
    nav.add($('a', nav).attr('href')).remove();
    updateTabs();
});

function updateTabs(){
    for(var i=0; i < $('.tab-toggle').length; i++){
        $('.tab-toggle:eq('+i+') .dev-nr, .tab-pane:eq('+i+') .dev-nr').text(i+1);
    }
}

Demo

还有一点beautified version