When refreshing the page, the default active tab shows quickly before the last active tab

I’m using Bootstrap tabs with the “active” class set on the second tab. When refreshing the page, no matter what tab I’m on, that default active tab always shows for a second before the last visited tab is displayed. How do I stop this?
Here is my code:
HTML
<ul class="nav nav-tabs" role="tablist"> <li><a class="cta2" href="home.html#contact">Get an offer</a></li> <li role="presentation" class="active"><a href="#kids" role="tab" data-toggle="tab">Kids</a></li> <li role="presentation"><a href="#documentary" aria-controls="documentary" role="tab" data-toggle="tab">Documentary</a></li> <li role="presentation"><a href="#lifestyle" aria-controls="lifestyle" role="tab" data-toggle="tab">Lifestyle</a></li> <li role="presentation"><a href="#news" aria-controls="news" role="tab" data-toggle="tab">News</a> </li> <li role="presentation"><a href="#fashion" aria-controls="fashion" role="tab" data-toggle="tab">Fashion</a></li> <li role="presentation"><a href="#sports" aria-controls="sports" role="tab" data-toggle="tab">Sports</a></li> <li role="presentation"><a href="#music" aria-controls="music" role="tab" data-toggle="tab">Music</a></li> <li role="presentation"><a href="#adult" aria-controls="adult" role="tab" data-toggle="tab">Adult</a> </li> </ul>

JQUERY

$(function() { 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
    localStorage.setItem('lastTab', $(this).attr('href'));
});

var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
    $('[href="' + lastTab + '"]').tab('show');
}    
}); 

Is this lesson code, or personal project code? If it’s a lesson, please furnish a link to the exercise. Thanks.

It’s a personal project.

Personal projects should be placed under the “Corner Bar” section.

Ok thanks, I didn’t know that. Will move it there.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.