Как использовать jQuery localStorage, чтобы запомнить последнюю открытую вкладку? - PullRequest
0 голосов
/ 22 июня 2019

У меня проблема с запоминанием вкладок после обновления / перезагрузки страницы.В нескольких вкладках есть форма, которая отправляется, когда пользователь возвращается на страницу, вкладка возвращается к вкладке по умолчанию, а не к той, которую они ранее открывали.Это проблема, мне нужно иметь возможность вспомнить, какая вкладка была открыта, и чтобы она оставалась открытой.

Я использую следующий HTML-код:

<ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab 1</li>
  <li class="tab-link" data-tab="tab-2">Tab 2</li>
  <li class="tab-link" data-tab="tab-3">Tab 3</li>
  <li class="tab-link" data-tab="tab-4">Tab 4</li>
  <li class="tab-link" data-tab="tab-5">Tab 5</li>
</ul>

<div id="tab-1" class="tab-content">
  content 1 here
</div>
<div id="tab-2" class="tab-content">
  content 2 here
</div>
<div id="tab-3" class="tab-content">
  content 3 here
</div>
<div id="tab-4" class="tab-content">
  content 4 here
</div>
<div id="tab-5" class="tab-content">
  content 5 here
</div>

jQuery is amиспользуется следующим образом:

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
        localStorage.selectedTab = $(this).index() + 1;
    });

});

if (localStorage.selectedTab) {
    var tb = localStorage.selectedTab;
    $("tab-link:eq(" + (localStorage.selectedTab - 1) + ")").click();
  alert (tb);
}

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

$("tab-link:eq(" + (localStorage.selectedTab - 1) + ")").click();

После обновления вкладка не запоминается, любая помощь будет полезна в том, где я иду не так.

Вотссылка на текущий рабочий код: JSFiddle

1 Ответ

0 голосов
/ 23 июня 2019

Это исправит:

    $(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
        localStorage.selectedTab = $(this).index() + 1;
    });

 if (localStorage.selectedTab) {
    var tb = localStorage.selectedTab;
    var tab = "li.tab-link[data-tab='tab-" + tb + "']";
    $('li.current').removeClass('current');
    $(tab).addClass('current');
    alert(tb);
}
});

Рабочая скрипка: http://jsfiddle.net/t9so1fy4/5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...