2

Подскажите пожалуйста, можно ли в этом коде сделать так, что бы при перезагрузке страницы пользователь оставаться на активной вкладке?

(function($) {
  jQuery(function() {
 
    jQuery('ul.tabs__caption').on('click', 'li:not(.active)', function() {
      jQuery(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(jQuery(this).index()).addClass('active');
    });
 
    var tabIndex = window.location.hash.replace('#tab','')-1;
    if (tabIndex != -1) jQuery('ul.tabs__caption li').eq(tabIndex).click();
 
    jQuery('a[href*="#tab"]').click(function() {
      var tabIndex = jQuery(this).attr('href').replace(/(.*)#tab/, '')-1;
      jQuery('ul.tabs__caption li').eq(tabIndex).click();
    });
 
  });
})(jQuery);
.tabs{
    margin-top: 40px;
}

.tabs__content {
  display: none; /* по умолчанию прячем все блоки */
}
.tabs__content.active {
  display: block; /* по умолчанию показываем нужный блок */
}

ul.tabs__caption{
    text-align: center;
    width: 100%;
    padding: 0;
}

ul.tabs__caption li{
    list-style-type: none;
    width: 80px;
    display: inline-block;
    background: #a070af;
    color: #fff;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    border: 2px solid #a070af;
    font-weight: 500;
    border-bottom: none;
}

ul.tabs__caption li:hover{
    background: #8e5e9c;
    border: 2px solid #8e5e9c; 
        border-bottom: none;
}

ul.tabs__caption li.active{
    background: #fff;
    color: #a070af;
}

ul.tabs__caption li.unfpa-tab-video {
    font-weight: 600;
    color: #0070c9;
    background-color: #fff;
}
ul.tabs__caption li.unfpa-tab-video:hover {
    color: #fff;
    background-color: #000;
}
ul.tabs__caption li.unfpa-tab-video.active {
    font-weight: 600;
    color: #fff;
    background-color: #000;
}

ul.tabs__caption li.unfpa-tab-text {
    font-weight: 600;
    color: #ee7738;
    background-color: #fff;
}
ul.tabs__caption li.unfpa-tab-text:hover {
    color: #fff;
    background-color: #000;
}
ul.tabs__caption li.unfpa-tab-text.active {
    font-weight: 600;
    color: #fff;
    background-color: #000;
}

ul.tabs__caption li.unfpa-tab-chklist {
    font-weight: 600;
    color: #2eab6c;
    background-color: #fff;

}
ul.tabs__caption li.unfpa-tab-chklist:hover {
    color: #fff;
    background-color: #000;
}
ul.tabs__caption li.unfpa-tab-chklist.active {
    font-weight: 600;
    color: #fff;
    background-color: #000;
}

ul.tabs__caption li.unfpa-tab-test {
    font-weight: 600;
    color: #e84351;
    background-color: #fff;
}
ul.tabs__caption li.unfpa-tab-test:hover {
    color: #fff;
    background-color: #000;
}
ul.tabs__caption li.unfpa-tab-test.active {
    font-weight: 600;
    color: #fff;
    background-color: #000;
}

.tabs_course{
    margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="tabs">

  <ul class="tabs__caption">
    <li class="unfpa-tab-video active">A</li>
    <li class="unfpa-tab-text">B</li>
    <li class="unfpa-tab-chklist">C</li>
    <li class="unfpa-tab-test">D</li>
  </ul>

  <div class="tabs__content active">
    <div class="tabs_course">1</div>
  </div>

  <div class="tabs__content">
    <div class="tabs_course">2</div>
  </div>

  <div class="tabs__content">
    <div class="tabs_course">3</div>
  </div>

  <div class="tabs__content">
    <div class="tabs_course">4</div>
  </div>

</div>

1 ответ 1

2

Вы можете в заголовки табов добавить ссылки на #tab, тогда при переключении табов хеш будет добавляться в адресную строку и сохраняться при перезагрузке:

<ul class="tabs__caption">
    <li class="unfpa-tab-video active"><a href="#tab1">A</a></li>
    <li class="unfpa-tab-text"><a href="#tab2">B</a></li>
    <li class="unfpa-tab-chklist"><a href="#tab3">C</a></li>
    <li class="unfpa-tab-test"><a href="#tab4">D</a></li>
</ul>

Как альтернативный вариант - использовать localStorage, sessionStorage или cookie для сохранения состояния активного таба:

...
function activateTab(tabNumber) {
    ...
    localStorage.activeTab = tabNumber;
    ...
}
if('activeTab' in localStorage) {
    activateTab(localStorage.activeTab);
}
2
  • Не пойму ни первую, ни вторую реализацию ( 1 мар 2021 в 2:48
  • @АннаМатвеева добавил код для первой реализации. По второй - функция activateTab выполняется, когда нужно переключить таб (внутри нее навешивание класса active и все, с этим связанное), при запуске она сохраняет номер активного таба в localStorage. А при загрузке/перезагрузке страницы проверяем localStorage , если там есть номер таба - активируем его
    – br3t
    1 мар 2021 в 15:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.