Question

我有这个HTML代码：

<div class="tab-box">
        <a href="javascript:;" class="tabLink activeLink" id="tab1">Tab1</a> 
        <a href="javascript:;" class="tabLink" id="tab2">Tab2</a> 
        <a href="javascript:;" class="tabLink" id="tab3">Tab3</a> 
        <a href="javascript:;" class="tabLink" id="tab4">Tab4</a> 
        </div>

这会列出标签...

然后每个标签都像：

<div class="tabcontent" id="tab1-1">
tab1 content
</div>

<div class="tabcontent hide" id="tab2-1">
tab1 content
</div>

<div class="tabcontent hide" id="tab3-1">
tab1 content
</div>

<div class="tabcontent hide" id="tab4-1">
tab1 content
</div>

然后是jquery代码：

$(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        localStorage.selectedTab = $(this).index() + 1;
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  

    // search for local storage
    if (localStorage.selectedTab) {
      $(".tabLink:eq(" + (localStorage.selectedTab - 1) + ")").click();
    }
  });

上面的jquery，我试图让它记住如果页面刷新时选择的最后一个选项卡。但是，这仅适用于一页。如果我更改为使用标签查看其他页面，则会选择随机标签，因为我找不到最后一个选项，因为它位于具有不同名称的其他页面上。

如何让它记住每个页面的最后一个选定标签？

Answer 1

饼干怎么样？

document.cookie = "tabId=" + tabeId;

然后检查一下：

tabId = document.cookie

Answer 2

您可以使用document.cookie = selectedTab，

等Cookie

或者您可以通过ajax请求将所选标签的值发送回页面，例如：

var jqxhr = $.get( "example_page.php", {selectedTab: "3"} );

Answer 3

首先，这真的很糟糕。你只是在重复自己。

$(".tabLink").each(function(){
    $(this).click(function(){

请使用此

$(".tabLink").on("click", function() {

方法的其余部分，只存储元素的ID。

    // Stop the href from functioning
    e.preventDefault();

    // Store the tab identity in localStorage
    localStorage.selectedTab = $(this).attr("id");

    // Toggle the links
    $(this).addClass("activeLink").siblings().removeClass("activeLink");

    // Toggle the tabs
    $(".tabContent").hide();
    $("#" + localStorage.selectedTab + "-1").show();
});

并在加载时显示所选标签

if ($(localStorage.selectedTab).length === 1) {
    $(localStorage.selectedTab).click();
} else {
    $("#tab1").click();
}

用我的小提琴试试这个：http://jsfiddle.net/itanex/5sf8p/

如果刷新页面，Jquery会在每个页面上保留选项卡

3 个答案: