Сохраняйте текущую вкладку Bootstrap активной после перезагрузки страницы, не переходя на первую между

Question

Я использую таблетки Bootstrap в моем приложении:

<div class="container">
  <ul class="nav nav-pills">
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="about">About</div>
  <div class="tab-pane" id="contacts">Contacts</div>
</div>

Чтобы оставаться на той же вкладке после перезагрузки страницы, я использую следующую функцию:

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

Проблема в том, что после перезагрузки страницы первая вкладка становится активной в течение 1 секунды, а затем она переходит на фактическую активную вкладку. Могу ли я сохранить текущую вкладку без этого "прыжка"?

Answer 1

Ответ так же прост, как ABC.

Мне просто нужно было удалить class="active" из первого <li></li> тег:

<li><a data-target="#home" data-toggle="tab">Home</a></li>

Answer 2

Эта строка:

$('[href="' + lastTab + '"]').tab('show');

должен быть изменен в:

$('[data-target="' + lastTab + '"]').tab('show');

Вы не можете ссылаться на href, но на data-target.

То же самое относится к: localStorage.setItem.....

Фиксированный код ( jsfiddle):

$(function() {
  var lastTab = localStorage.getItem('lastTab');
  $('.container, .tab-content').removeClass('hidden');
  if (lastTab) {
    $('[data-target="' + lastTab + '"]').tab('show');
  }
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('lastTab', $(this).data('target'));
  });
});

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container hidden">
    <ul class="nav nav-pills">
        <li><a data-target="#home" data-toggle="tab">Home</a></li>
        <li><a data-target="#about" data-toggle="tab">About</a></li>
        <li><a data-target="#contacts" data-toggle="tab">Contacts</a></li>
    </ul>
</div>

<div class="tab-content hidden">
    <div class="tab-pane" id="home">Home</div>
    <div class="tab-pane" id="about">About</div>
    <div class="tab-pane" id="contacts">Contacts</div>
</div>

Answer 3

Простой ответ: просто удалите АКТИВНЫЙ КЛАСС со вкладки по умолчанию и ее содержимого.

      <div class="container">
  <ul class="nav nav-pills">
    <li><a data-target="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane" id="home">Home</div>
  <div class="tab-pane" id="about">About</div>
  <div class="tab-pane" id="contacts">Contacts</div>
</div>

В файле Javascript в теге сценария:

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