title: current tab active after a page reload - bootsrap
body: <p>I have the following Bootstrap tabs :-</p>
  
  <pre><code>            &lt;ul class="nav nav-tabs"&gt;
              &lt;li class="active"&gt;
                  &lt;a href="#1" data-toggle="tab"&gt;
                      &lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt;
                      Tab 1
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#2" data-toggle="tab"&gt;
                      &lt;span class="glyphicon glyphicon-tint"&gt;&lt;/span&gt;
                      Tab 2
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#3" data-toggle="tab"&gt;
                      &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;
                      Tab 3
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div class="tab-pane fade in active" id="1"&gt;
                  &lt;table class="table table-condensed table-bordered table-striped volumes"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th class="tdTitle"&gt;Age&lt;/th&gt;
                              &lt;th class="tdTitle"&gt;Grade&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;James Smith&lt;/td&gt;
                              &lt;td &gt;14&lt;/td&gt;
                              &lt;td &gt;7&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;John Dolan&lt;/td&gt;
                              &lt;td &gt;11&lt;/td&gt;
                              &lt;td &gt;3&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;George Eliott&lt;/td&gt;
                              &lt;td &gt;12&lt;/td&gt;
                              &lt;td &gt;16&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
              &lt;div class="tab-pane fade" id='2'&gt;
                  &lt;table class="table table-condensed table-bordered table-striped volumes"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th class="tdTitle"&gt;Salary&lt;/th&gt;
                              &lt;th class="tdTitle"&gt;WorkPlace&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;James Smith&lt;/td&gt;
                              &lt;td &gt;44000&lt;/td&gt;
                              &lt;td &gt;London&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;John Dolan&lt;/td&gt;
                              &lt;td &gt;52000&lt;/td&gt;
                              &lt;td &gt;Munich&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;George Eliott&lt;/td&gt;
                              &lt;td &gt;40000&lt;/td&gt;
                              &lt;td &gt;Berlin&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane fade" id='3'&gt;
                  &lt;table class="table table-condensed table-bordered table-striped volumes"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th class="tdTitle"&gt;Married&lt;/th&gt;
                              &lt;th class="tdTitle"&gt;Kids&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;James Smith&lt;/td&gt;
                              &lt;td &gt;Yes&lt;/td&gt;
                              &lt;td &gt;3&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;John Dolan&lt;/td&gt;
                              &lt;td &gt;No&lt;/td&gt;
                              &lt;td &gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td &gt;George Eliott&lt;/td&gt;
                              &lt;td &gt;Yes&lt;/td&gt;
                              &lt;td&gt;1&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
  
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And I wish to be able to get the last active tab on page reload, so I added the following JQuery :-</p>
  
  <pre><code>$(function () {
              //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('lastTab', $(e.target).attr('href'));
              });
  
              //go to the latest tab, if it exists:
              var lastTab = localStorage.getItem('lastTab');
              alert(lastTab);
              if (lastTab) {
                  $(lastTab).tab('show');
              }
          });
  </code></pre>
  
  <p>I changed the Jquery and now I am managing to get the lastTab correctly, however still when refreshing, I am always showing the first tab.</p>
  
  <p>Can you please help me?</p>
  
  <p>Thanks for your help and time</p>