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