title: Setting active tab javascript
body: <p>I have been trying to go about setting my page's active tab. It is weird, cause I can manually set the active tab like the following:</p>
  
  <pre><code>&lt;div class="tabs"&gt;
          &lt;ul class="tab-links"&gt;
              &lt;li id="t1" class="active"&gt;&lt;a href="#tab1"&gt;TAB&lt;/a&gt;&lt;/li&gt;  //setting it here works
              &lt;li id="t2"&gt;&lt;a href="#tab2"&gt;TAB&lt;/a&gt;&lt;/li&gt;
              &lt;li id="t3"&gt;&lt;a href="#tab3"&gt;TAB&lt;/a&gt;&lt;/li&gt;
              &lt;li id="t4"&gt;&lt;a href="#tab4"&gt;TAB&lt;/a&gt;&lt;/li&gt;
              &lt;li id="t5"&gt;&lt;a href="#tab5"&gt;TAB&lt;/a&gt;&lt;/li&gt;
              &lt;li id="t6"&gt;&lt;a href="#tab6"&gt;TAB&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div id="tab1" class="tab" style="font-family: 'Open Sans', sans-serif;"&gt;
                  &lt;?php   include("tab1.html");    ?&gt;
              &lt;/div&gt;
              &lt;div id="tab2" class="tab" style="font-family: 'Open Sans', sans-serif;"&gt;
                  &lt;?php   include("tab2.html");    ?&gt;
              &lt;/div&gt;
              &lt;div id="tab3" class="tab" style="font-family: 'Open Sans', sans-serif;"&gt;
                  &lt;?php   include("tab3.php");    ?&gt;
              &lt;/div&gt;
              &lt;div id="tab4" class="tab" style="font-family: 'Open Sans', sans-serif;"&gt;
                  &lt;?php   include("tab4.php");    ?&gt;
              &lt;/div&gt;
              &lt;div id="tab5" class="tab" style="font-family: 'Open Sans', sans-serif;"&gt;
                  &lt;?php   include("tab5.html");    ?&gt;
              &lt;/div&gt;
              &lt;div id="tab6" class="tab" style="font-family: 'Open Sans', sans-serif;"&gt;
                  &lt;?php   include("tab6.html");    ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>However, when I try to set it like this nothing happens:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  
      //setting the tabIndex to the stored value.
      $(".tab-links").tabs({active: tabIndex}); //need to change this somehow
      var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
      console.log("local storage value of tabIndex parseInt: " + tabIndex);
      if(tabIndex != null){
          console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
          $(document).on("click", ".tabs &gt; ul &gt; li:nth-child(" + tabIndex + ") a", function(e) {});
          //$(".tabs").tabs({
              //  active: tabIndex 
          //});
      }
  
      //storing the last tab index before page refresh
      $(document).on("click", ".tab-links a", function(e) {
            $('.active').removeClass('active');
            $(this).parent().addClass('active');
            var curTab = $('.tab-links').find('.active')[0].id;
            console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
            var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
            localStorage.setItem('activeTab', curTabIndex);
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Am I missing something here? I just need to somehow set the tabIndex to become the active tab on page refresh.</p>