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.

HTML

<ul class="nav my-nav1 nav-tabs mt-3 " id="myTab" role="tablist">
   <li class="nav-item border border-secondary rounded">
    <a class="nav-link active"  data-toggle="tab" href="#menu1">MENU1</a>
 </li>
 <li class="nav-item border border-secondary rounded">
   <a class="nav-link "  data-toggle="tab" href="#menu2">MENU2</a>
 </li>
</ul>

this is js i am using but it dosen't work.

JS

<script type="text/javascript">
  $(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');
  }
 });
</script> 

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.

HTML

<ul class="nav my-nav1 nav-tabs mt-3 " id="myTab" role="tablist">
   <li class="nav-item border border-secondary rounded">
    <a class="nav-link active"  data-toggle="tab" href="#menu1">MENU1</a>
 </li>
 <li class="nav-item border border-secondary rounded">
   <a class="nav-link "  data-toggle="tab" href="#menu2">MENU2</a>
 </li>
</ul>

this is js i am using but it dosen't work.

JS

<script type="text/javascript">
  $(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');
  }
 });
</script> 

• javascript
• php
• html
• local-storage
• bootstrap-4

• 1 You can make use of localStorage – Ankit Agarwal Commented May 19, 2018 at 8:06
• Possible duplicate of stackoverflow.com/questions/18999501/… – Nandita Sharma Commented May 19, 2018 at 8:06
• 1 I tried solutions on stackoverflow but all solutions working with bootstrap 3 but when i tried with bootstrap 4 it dosen't work. – Vinay Commented May 19, 2018 at 8:08
• please someone give me solution for above code. – Vinay Commented May 19, 2018 at 8:11
• Possible duplicate of Bootstrap 3: Keep selected tab on page refresh – Riyafa Abdul Hameed Commented May 19, 2018 at 8:22

1 Answer 1

The jQuery selector is wrong: $('#myTab a[href="' + activeTab + '"]'), it should be...

$('.nav-tabs a[href="' + activeTab + '"]').tab('show');

https://www.codeply.com/go/C2B3mcrgSJ

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

var activeTab = localStorage.getItem('activeTab');
if(activeTab){
    $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
}