How load to show a Bootstrap Tab on page load without flickering the first tab first?

Question

I have a navbar that looks like this:

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

I have some javascript code that sets the correct active tab:

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

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

The above code works well (ignore the second parameter to .trigger() -- it's used elsewhere in my application), but with one caveat. When the page loads, the first tab is loaded and then correct tab is quickly displayed after that.

How can I prevent the first tab from getting displayed before the correct tab is displayed?

see also http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink — muzaffar, Aug 02 '16 at 06:41

score 8 · Accepted Answer · answered Mar 20 '14 at 15:58

8

You can hide the class active which is the first tab on page load:

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

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

answered Mar 20 '14 at 15:58

Felix

37,892
8
43
55

5

Or even better not put the active class there in the first place. :-) – vogomatix Mar 20 '14 at 16:05
1

I'm not sure whether OP can modify his HTML or not, but that is also an option :) – Felix Mar 20 '14 at 16:06
Just used this without the active hide, didn't this used to work before without the hack? – goyote Apr 05 '17 at 23:05

score 1 · Answer 2 · edited May 23 '17 at 12:26

Rather than waiting for ready() to fire, try putting your code into an IIFE and placing it right before the closing </body> tag (and after the jQuery and Bootstrap <script> elements it depends upon).

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

This way it'll fire as soon as the document has finished parsing.

How load to show a Bootstrap Tab on page load without flickering the first tab first?

2 Answers2