title: Keep current Bootstrap tab active after page reload without jumping to first one between
body: <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>