title: Make current tab active after postback bootstrap tabs
body: <p>I am using bootstrap tabs in my asp.net project, Tabs are working fine but when the user clicks on any of the button or any postback occurs,</p>
  
  <p>First tab get selected.</p>
  
  <p>I tried hidden field with jquery but it's not working.</p>
  
  <p>What am I missing kindly elaborate please.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>     &lt;script type="text/javascript"&gt;
                $(document).ready(function () {
                    var selectedTab = $("#&lt;%=hfTab.ClientID%&gt;");
                    var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
                   $('#dvTab a[href="#' + tabId + '"]').tab('show');
                   $("#dvTab a").click(function () {
                       selectedTab.val($(this).attr("href").substring(1));
                   });
               });
          &lt;/script&gt;
                                          &lt;div id="dvTab"&gt;
  &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li class="active"&gt;&lt;a href="#personal" aria-controls="personal" role="tab" data-toggle="tab"&gt;Personal Information&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#pf" aria-controls="pf" role="tab" data-toggle="tab"&gt;PF Nominee&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#gf" aria-controls="gf" role="tab" data-toggle="tab"&gt;GF Nominee&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#edu" aria-controls="edu" role="tab" data-toggle="tab"&gt;Education Details&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#fam" aria-controls="fam" role="tab" data-toggle="tab"&gt;Family Details&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab"&gt;Employment History&lt;/a&gt;&lt;/li&gt;                      
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
      &lt;div id="personal" role="tabpanel" class="tab-pane active"&gt;                                       
           ...                                          
      &lt;/div&gt;
      &lt;div id="pf" role="tabpanel" class="tab-pane"&gt;                                           
          ..
      &lt;/div&gt;
      &lt;div id="gf" role="tabpanel" class="tab-pane"&gt;
        ..
      &lt;/div&gt;
      &lt;div id="edu" role="tabpanel" class="tab-pane"&gt;
        &lt;asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /&gt;&lt;br /&gt;    
      &lt;/div&gt;
  &lt;/div&gt;                                                                       
  &lt;/div&gt;                               
        &lt;asp:HiddenField ID="hfTab" runat="server" /&gt;
  </code></pre>
  
  <p>The button is placed in Education Details Tab,
  On the click event of that button , I added :</p>
  
  <pre><code>protected void btn_AddEdu_Click(object sender, EventArgs e)
  {
   hfTab.Value = "edu";
  }
  </code></pre>