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

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

与其等待ready() 触发，不如尝试将您的代码放入IIFE 并将其放在关闭</body> 标记之前（以及在 jQuery 和Bootstrap <script>它依赖的元素）。

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
    (function(){
        // your code here
    })();
    </script>
</body>

这样，它会在文档完成解析后立即触发。

Answer 2

您可以隐藏类active，这是页面加载的第一个标签：

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

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