加载如何在页面加载时显示Bootstrap选项卡而不首先闪烁第一个选项卡？

Question

我有一个看起来像这样的导航栏:

<ul class="nav navbar-nav">
    <li class="active">
        <a href="#personal" data-toggle="tab">Personal Info</a>
    </li>
    <li>
        <a href="#con-sib" data-toggle="tab">Contacts/Siblings</a>
    </li>
    <li>
        <a href="#state-fed" data-toggle="tab">State/Federal</a>
    </li>
    <li>
        <a href="#eth" data-toggle="tab">Ethnicity</a>
    </li>
    <li>
        <a href="#placement" data-toggle="tab">Placement</a>
    </li>
    <li>
        <a href="#medical" data-toggle="tab">Medical</a>
    </li>
    <li>
        <a href="#sch-release" data-toggle="tab">School Release</a>
    </li>
</ul>

我有一些javascript代码设置正确的活动选项卡:

$(document).ready(function() {
    var hash = window.location.hash;

    if (hash) {
        var selectedTab = $('.nav li a[href="' + hash + '"]');
        selectedTab.trigger('click', true);
        }
    });

上面的代码运行良好(忽略第二个参数.trigger()- 它在我的应用程序的其他地方使用),但有一点需要注意.加载页面时,将加载第一个选项卡,然后在此之后快速显示正确的选项卡.

如何在显示正确的选项卡之前阻止显示第一个选项卡？

Answer 1

您可以隐藏active页面加载时第一个选项卡的类:

$(document).ready(function () {
    $('.active').hide();
    var hash = window.location.hash;

    if (hash) {
        var selectedTab = $('.nav li a[href="' + hash + '"]');
        selectedTab.trigger('click', true);
    }
});