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


#1

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

#2

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


#3

It's a personal project.


#4

Personal projects should be placed under the "Corner Bar" section.


#5

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


#6

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