堆叠时求助于活动引导选项卡

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--例如，添加和删除'active‘类--我们仍然可以实现您想要做的事情：

您的CSS可以包含如下内容：

ul {
  display: flex;
}

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

然后，当您的JavaScript分配活动类时，<li class="active">应该神奇地将自己重新排序到列表的末尾，并连接到选项卡窗格。