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

Answer 2

不要等待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>

这样一旦文档完成解析，它就会立即触发。

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

2 个答案: