En un sitio web de Bootstrap 4, tengo las siguientes pestañas:

 <ul id="tabsJustified" class="nav nav-tabs"> <li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link active">Personal details</a></li> <li class="nav-item"><a href="#tab2" data-target="#tab2" data-toggle="tab" class="nav-link">Medical conditions</a></li> <li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Medication</a></li> <li class="nav-item"><a href="#tab4" data-target="#tab4" data-toggle="tab" class="nav-link">Care needs</a></li> <li class="nav-item"><a href="#tab4" data-target="#tab5" data-toggle="tab" class="nav-link">Care environment</a></li> <li class="nav-item"><a href="#tab3" data-target="#tab6" data-toggle="tab" class="nav-link"><i class="fa fa-plus-circle mr-2"></i>Add a second client</a></li> </ul>

Lo que quiero es recordar la última pestaña seleccionada y cuando la página se vuelva a cargar, vaya a esa pestaña.

Con este código, solo funciona con la pestaña 1, 2 y 6.

 $(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function () { localStorage.setItem('lastTab', $(this).attr('href')); }); var lastTab = localStorage.getItem('lastTab'); if (lastTab) { $('[href="' + lastTab + '"]').tab('show'); console.log(lastTab); } });

Cuando hago clic en la cuarta pestaña, después de recargar, la quinta pestaña estará activa. La fila console.log devuelve la identificación de pestaña o href correcta, lo verifiqué.