javascript - Jquery 使用本地存储记住上次选择的选项卡

Question

我有这个 jquery 代码:

<script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  
  });
</script>

我正在努力做到这一点，以便在使用此代码刷新页面时记住该选项卡:

<script type="text/javascript">
  $(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();
    }
  });
</script>

HTML:

<div class="tab-box">
        <a href="javascript:;" class="tabLink activeLink" id="viewcustomer">View Customer</a> 
        <a href="javascript:;" class="tabLink activeLink" id="viewresellercustomers">View Reseller Customer</a> 
        <a href="javascript:;" class="tabLink activeLink" id="viewsalesmancustomer">View Salesman Customer</a> 
        <a href="javascript:;" class="tabLink" id="archivedcustomers">View Archived Customer</a> 
        </div>

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

它工作正常，但选项卡位于多个页面上，因此如果我转到不同的页面，则会选择不同的选项卡，因为它试图记住上次选择的选项卡。

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

Answer 1

localStorage坚持选择:

$(document).ready(function () {

    function activate(tab) {
        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        tab.addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = tab.attr("title");
        $("#" + content_show).slideDown();
    }

    if (localStorage) { // let's not crash if some user has IE7
        var index = parseInt(localStorage['tab'] || '0');
        activate($('a.tab').eq(index));
    }

    // When a link is clicked
    $("a.tab").click(function () {
        if (localStorage) localStorage['tab'] = $(this).closest('li').index();
        activate($(this));
    });

});