Keep current Bootstrap tab active after page reload without jumping to first one between
<p>I'm using Bootstrap pills in my app:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;ul class="nav nav-pills"&gt;
    &lt;li class="active"&gt;&lt;a data-target="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about" data-toggle="tab"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#contacts" data-toggle="tab"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="tab-content"&gt;
  &lt;div class="tab-pane active" id="home"&gt;Home&lt;/div&gt;
  &lt;div class="tab-pane" id="about"&gt;About&lt;/div&gt;
  &lt;div class="tab-pane" id="contacts"&gt;Contacts&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In order to stay on the same tab after page reload I use the following function:</p>

<pre><code>$(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');
  }
});
</code></pre>

<p>The problem is that after page reload, the first tab becomes active for 1 second and then it jumps to the actual active tab. Can I keep current tab without this 'jumping'?</p>