title: Keep active tab on page refresh in bootstrap 4 using local storage?
body: <p>I am trying to keep selected tab active on page refresh. but when i am not able to find any solution for tabs in bootstrap 4. i tried to make changes according to bootstrap 3 solutions but nothing work. please help me.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="nav my-nav1 nav-tabs mt-3 " id="myTab" role="tablist"&gt;
     &lt;li class="nav-item border border-secondary rounded"&gt;
      &lt;a class="nav-link active"  data-toggle="tab" href="#menu1"&gt;MENU1&lt;/a&gt;
   &lt;/li&gt;
   &lt;li class="nav-item border border-secondary rounded"&gt;
     &lt;a class="nav-link "  data-toggle="tab" href="#menu2"&gt;MENU2&lt;/a&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>this is js i am using but it dosen't work.</p>
  
  <p>JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
      localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
      $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
   });
  &lt;/script&gt; 
  </code></pre>