在堆疊時使用活動引導選項卡

Question

對於我正在處理的新引導網站，我在導航選項卡堆棧時對活動選項卡進行排序，以便選定選項卡始終連接到選項卡窗格。雖然這有效，但對我來說感覺就像是一種黑客。有沒有更好的方法來實現這一點，保留原始的標籤順序？

HTML標記：

<div id="tab-bundle" class="container-fluid"> 
    @Html.HiddenFor(model => model.SelectedBundle) 
    <ul class="nav nav-tabs" id="coverageTabs"> 
     <li><a href="#Minimum">@LanguageDb.Me.Minimum</a></li> 
     <li><a href="#Better">@LanguageDb.Me.Better</a></li> 
     <li><a href="#Best">@LanguageDb.Me.Best</a></li> 
     <li><a href="#Custom">@LanguageDb.Me.Custom</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane active bg-info" id="ajaxPanel"> 
      @Html.Partial("SelectedBundle", Model) 
     </div> 
    </div> 
</div> 

的Javascript：

$(document).ready(function() { 

    var updateCoverage = function (e) { 
     e.preventDefault(); 
     var $tab = $(this); 
     $('#SelectedBundle').val($(this).attr("href").substr(1)); 
     $('#coverageTabs a').css({ backgroundColor: "", color: "" }); 

     // ajax omitted for brevity 
     $tab.tab('show').css('background-color', $('#ajaxPanel').css('background-color')).css('color', $('#ajaxPanel').css('color')); 

     if ($('#coverageTabs').width() < 768) { 
      $tab.closest('li').appendTo('#coverageTabs'); 
     } 
    }; 

    $('a[href=#' + $('#SelectedBundle').val() + ']').tab('show').css('background-color', $('#ajaxPanel').css('background-color')).css('color', $('#ajaxPanel').css('color')); ; 

    $('#coverageTabs a').click(updateCoverage); 

}); 

截圖（注意最小標籤已移動到結尾）：

Answer 1

這提醒了一下最近的問題我剛回答：

Unordered list - list item position

的想法是，用真最小JavaScript的說法，添加和去除的「活躍」類我們仍然可以達到你想要做什麼：

你的CSS可能包含這樣的事情：

ul { 
    display: flex; 
} 

li[class=active] { 
    order: 4; /* whatever the last <li> slot is */ 
    background: green 
} 

然後，當你的JavaScript分配活動類，則<li class="active">應該只是奇蹟般地重新排序本身在列表的末尾，並連接到標籤窗格。