Question

在刷新/重新加载页面后，记住选项卡时出现问题。在几个选项卡中，有一种表单可以提交，当用户返回页面时，该选项卡将返回默认选项卡，而不是他们先前打开的选项卡。这是问题，我需要能够记住哪个选项卡处于打开状态并保持打开状态。

我正在使用的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如下：

$(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

Answer 1

这将解决该问题：

    $(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/

如何使用jQuery localStorage记住上次打开的标签页？

1 个答案: