Как оставить вкладку активной после перезагрузки страницы?

Question

Делаю сайт на Bootstrap, после перезагрузки страницы активная вкладка возвращается на первую, которая активна по умолчанию. Как сделать так, чтобы после перезагрузки сохранялась моя предыдущая активная вкладка?

html:

<body>
</br>
<div class="container">
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#Products">Продукты</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Services">Услуги</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Staff">Сотрудники</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Courses">Курсы</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Tracking">Отслеживание заказов</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Working_hours">Режим работы</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#Requisites">Реквизиты</a>
  </li>
</ul>
</br>
</div>

<div class="tab-content">
  <div class="tab-pane active container" id="Products"><?php include('Products.php');?></div>
  <div class="tab-pane container" id="Services"><?php include('Services.php');?></div>
  <div class="tab-pane container" id="Staff"><?php include('Staff.php');?></div>
  <div class="tab-pane container" id="Courses"><?php include('Courses.php');?></div>
  <div class="tab-pane container" id="Tracking"><?php include('Tracking.php');?></div>
  <div class="tab-pane container" id="Working_hours"><?php include('Working_hours.php');?></div>
  <div class="tab-pane container" id="Requisites"><?php include('Requisites.php');?></div>  
</body>

Пробовал делать через CSS, то тогда пропадает подсветка активности вкладки

CSS:

.tab-pane {
  display: none;
}
.tab-pane:target {
  display: block;
}

Пробовал найти что-то на JS, но не получилось прикрутить к моему коду:(

БЛОГ НА HUSL

Как оставить вкладку активной после перезагрузки страницы?

Ответы (0 шт):