title: How can I keep selected Bootstrap tab on page refresh?
body: <p>I am trying to <strong>keep selected tab active</strong> on refresh with <strong>Bootstrap 3</strong>. Tried and checked with some question already been asked here but none of work for me. Don't know where I am wrong. Here is my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- tabs link --&gt;
  &lt;ul class="nav nav-tabs" id="rowTab"&gt;
      &lt;li class="active"&gt;&lt;a href="#personal-info" data-toggle="tab"&gt;Personal Information&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#Employment-info" data-toggle="tab"&gt;Employment Information&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#career-path" data-toggle="tab"&gt;Career Path&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#warnings" data-toggle="tab"&gt;Warning&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- end: tabs link --&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="personal-info"&gt;
          tab data here...
      &lt;/div&gt;
  
      &lt;div class="tab-pane" id="Employment-info"&gt;
          tab data here...
      &lt;/div&gt;
  
      &lt;div class="tab-pane" id="career-path"&gt;
          tab data here...
      &lt;/div&gt;
  
      &lt;div class="tab-pane" id="warnings"&gt;
          tab data here...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong>:</p>
  
  <pre><code>// tab
  $('#rowTab a:first').tab('show');
  
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  //save the latest tab; use cookies if you like 'em better:
  localStorage.setItem('selectedTab', $(e.target).attr('id'));
  });
  
  //go to the latest tab, if it exists:
  var selectedTab = localStorage.getItem('selectedTab');
  if (selectedTab) {
    $('#'+selectedTab).tab('show');
  }
  </code></pre>