title: How to remember last tab used after submit/refresh?
body: <p>I am using jQuery tab on my webpage but want it to remember the last tab used, after a form sumbit or when the user click on a link and then comming back to the tab page. How can i remember the last tab used after refresh of page, or navigating to another link. None of the examples i have found around the net work so far, I have this code so far:</p>
  
  <pre><code>&lt;div id="content-container"&gt;
      &lt;div id="page-content"&gt; 
          &lt;div class="row"&gt;   
              &lt;div class="col-md-12"&gt;
                  &lt;div class="tab-base"&gt;
                      &lt;ul class="nav nav-tabs"&gt;
                          &lt;li class="active"&gt;
                              &lt;a data-toggle="tab" href="#demo-lft-tab-1"&gt;Tab1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a data-toggle="tab" href="#demo-lft-tab-2"&gt;Tab2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a data-toggle="tab" href="#demo-lft-tab-3"&gt;Tab3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a data-toggle="tab" href="#demo-lft-tab-4"&gt;Tab4&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="tab-content"&gt;
                          &lt;div id="demo-lft-tab-1" class="tab-pane fade active in"&gt;&lt;/div&gt;
                          &lt;div id="demo-lft-tab-2" class="tab-pane fade"&gt;&lt;/div&gt;
                          &lt;div id="demo-lft-tab-3" class="tab-pane fade"&gt;&lt;/div&gt;
                          &lt;div id="demo-lft-tab-4" class="tab-pane fade"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;          
  &lt;/div&gt;          
  &lt;script&gt;
      var lastTab = localStorage.getItem('lastTab');
      if (!lastTab) {
          lastTab = 0;
      }
      $(".tab-base").tabs({
          activate: function(event, ui) {
              //if another tab is activate, save it's index to the localStorage
              localStorage.setItem('lastTab', ui.newTab.index());
          },
          //set the corresponding tab to active
          active: lastTab
      });
  &lt;/script&gt;
  </code></pre>