Подскажите пожалуйста, можно ли в этом коде сделать так, что бы при перезагрузке страницы пользователь оставаться на активной вкладке?
(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>