title: Bootstrap Tabs in .NET with persist state after page refresh
body: <p>I am using native bootstrap tabs and trying to persist state of the current tab after the page refresh. Here is my form bootstrap 3 with Tabs:</p>
  
  <pre><code>&lt;form runat="server" id="mainForm"&gt;
  
  
  &lt;div class="Tabs"&gt;
  
  
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li runat="server" id="liSectionContractPayments" onclick="return makeActiveTab('sectionA');"&gt;
              &lt;a data-toggle="tab" href="#sectionA"&gt;
                  Heading 1
          &lt;/li&gt;
          &lt;li runat="server" id="liSectionTracking" onclick="return makeActiveTab('sectionB');"&gt;
              &lt;a data-toggle="tab" href="#sectionB"&gt;
                  Heading 2
          &lt;/li&gt;
          &lt;li runat="server" id="liSectionNotes&gt;
              &lt;a data-toggle="tab" href="#sectionC" onclick="return makeActiveTab('sectionC');"&gt;
                  Heading 3&lt;/li&gt;
          &lt;/ul&gt;
  
  
          &lt;div class="tab-content"&gt;
              &lt;div id="sectionContractPayments" class="tab-pane fade"&gt;
                  &lt;h4&gt;Heading 1&lt;/h4&gt;
                  Content for heading 1  
              &lt;/div&gt;
              &lt;div id="sectionTracking" class="tab-pane fade"&gt;                             
                  &lt;h4&gt;Heading 2&lt;/h4&gt;
                  Content for heading 2     
              &lt;/div&gt;
              &lt;div id="sectionNotes" class="tab-pane fade"&gt;                             
                  &lt;h4&gt;Heading 3&lt;/h4&gt;     
                  Content for heading 3
              &lt;/div&gt;
  
  
          &lt;/div&gt;    
      &lt;/div&gt;
  
  
      &lt;%-- This is to keep the state of current tab. --%&gt;
      &lt;asp:HiddenField ID="SetActiveNavTab" runat="server" /&gt;
  
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I am using a hidden field SetActiveNavTab to persist state of the current tab, to do that I have the following script:</p>
  
  <pre><code>&lt;script&gt;
  
  /* Not working ... */
  function activaTab2(tab) {
      $('.nav-tabs a[href="#' + tab + '"]').tab('show');
  };
  function makeActiveTab(activeTabName) {
      $('#&lt;%=SetActiveNavTab.ClientID%&gt;').val(activeTabName);
      activaTab2($('#&lt;%=SetActiveNavTab.ClientID%&gt;').val(activeTabName));
      alert(activeTabName + "AND" + activaTab2($('#&lt;%=SetActiveNavTab.ClientID%&gt;').val()););
  }
  /* Not working ... */
  
  
  $(document).ready(function() {
  
  
      function activaTab(tab) {
          $('.nav-tabs a[href="#' + tab + '"]').tab('show');
      };
  
      activaTab($('#&lt;%=SetActiveNavTab.ClientID%&gt;').val()); 
  
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The part which is not working is marked with comments. I can't seems to save the clicked on tab to a SetActiveNavTab hidden field. Something wrong with the script? </p>
  
  <p>Also not sure if there is a better way to do that?</p>