Zurücksetzen der aktiven Bootstrap-Registerkarte beim Stapeln

Question

Bei einer neuen Bootstrap-Website, an der ich gerade arbeite, sortiere ich die aktive Registerkarte, wenn die Registerkarte "nav-tab" ausgewählt ist, sodass die ausgewählte Registerkarte immer mit der Registerkarte verbunden ist. Während das funktioniert, fühlt es sich für mich wie ein Hack an. Gibt es eine bessere Möglichkeit, das zu erreichen, die die ursprüngliche Tab-Reihenfolge beibehält?

HTML-Markup:

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

}); 

Screenshot (die Mindest Registerkarte bemerken hat bis zum Ende bewegt):

Answer 1

Das erinnert ein wenig an eine aktuelle Frage Ich habe gerade geantwortet:

Unordered list - list item position

Die Idee ist, dass mit wirklich minimal JavaScript-sagen wir, das Hinzufügen und Entfernen von einer ‚aktiven‘ klassen können wir noch erreichen, was Sie zu tun versuchen:

Ihre CSS so etwas wie dieses enthalten könnte :

ul { 
    display: flex; 
} 

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

Dann, wenn Ihr JavaScript, um die aktive Klasse zuordnet, sollte die <li class="active"> nur neu ordnen sich auf magische Weise an das Ende der Liste und auf der Registerkarte Scheibe verbunden werden.