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

Jquery remember last selected tab using local storage

本文关键字：选择 选项 存储 Jquery      更新时间：2023-09-26

我有这个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>.....

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

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

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));
    });
});

您可以创建一个将 URL 链接到所选选项卡的地图，例如

tabStorage = { 
 "page_url_1" : 1,
 "page_url_2" : 3
}

您可以使用winow.location获取当前页面的URL。

然后要保存/检索它，请使用 JSON.stringify/JSON.parse ，因为localStorage只保留键/值对，而不是对象。这里的关键是"选项卡"，即值 - 地图的分级表示。

$(document).ready(function() {
   var tabStorage = (localStorage && localStorage.tabs) ? JSON.parse( localStorage.tabs ) : {};
   $(".tabLink").click(function(){
      tabStorage[ window.location ] =  $(".tabLink").index( this );
      if(localStorage) {
          localStorage.tabs = JSON.stringify( tabStorage );
      }
   });
   if (tabStorage[ window.location ]) {
      $(".tabLink").eq( tabStorage[ window.location ] ).trigger('click');
   }
});
相关文章：