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

});

Answer 2

您可以创建将网址链接到所选标签的地图，例如

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

您可以使用winow.location获取当前网页的网址。

然后使用JSON.stringify / JSON.parse来保存/检索它，因为localStorage只保留键/值对，而不是对象。这里的关键是'tabs'，值 - 地图的一个严格表示。

$(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');
   }
});

Jquery使用本地存储记住最后选择的选项卡

2 个答案: