1

我有这个 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，我试图让它记住如果页面被刷新，它会记住最后选择的选项卡。但是，这只适用于一页。如果我更改为使用选项卡查看不同的页面，它会选择一个随机选项卡，因为我找不到最后一个选择的选项卡，因为它位于具有不同名称的不同页面上。

我怎样才能让它记住每页最后选择的标签？

4

3 回答 3

0

饼干呢？

document.cookie = "tabId=" + tabeId;

然后检查它：

tabId = document.cookie
于 2013-09-18T21:34:57.183 回答
0

您可以使用 cookie，例如document.cookie = selectedTab，

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

var jqxhr = $.get( "example_page.php", {selectedTab: "3"} );
于 2013-09-18T21:42:33.940 回答
0

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

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

于 2013-09-18T21:43:16.457 回答