本地存储记住单击的选项卡类

Question

基于此example，我正在尝试将单击的选项卡“a”元素保存在本地存储中，并将“活动”类添加到其父元素“li”元素。但到目前为止还没有成功，我确定问题出在 jquery 代码的最后一部分。

<ul class="nav-tabs">
    <li class="active"><a href="javascript:;" class="tab-link" id="logo-tab">Logo Tab</a></li>
    <li><a href="javascript:;" class="tab-link" id="header-tab">Header Tab</a></li> 
    <li><a href="javascript:;" class="tab-link" id="footer-tab">Footer Tab</a></li> 
</ul>

<div id="logo-tab-1" class="tab-content active">
logo tab content demo
</div>

<div id="header-tab-1" class="tab-content">
header tab content demo
</div>

<div id="footer-tab-1" class="tab-content">
footer tab content demo
</div>

CSS

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}

jquery

$(".tab-link").each(function(){
        $(this).click(function(){
          localStorage.selectedTab = $(this).index() + 1;
          tabId = $(this).attr('id');
          $(".tab-link").parent('li').removeClass("active");
          $(this).parent('li').addClass("active");
            //   tab content
          $(".tab-content").removeClass("active");
          $("#"+tabId+"-1").addClass("active"); 
          return false;     
        });
      });  
        
      // search for local storage
      if (localStorage.selectedTab) {
        $(".tab-link:eq(" + (localStorage.selectedTab - 1) + ")").click().parent('li').addClass("active");
      }

jsfiddle代码

Answer 1

你的算法是正确的！唯一的问题是 $(this).index() 没有返回想要的值。

您需要从循环中获取索引.each(function(index)，然后使用它localStorage.selectedTab = index + 1。

$(".tab-link").each(function(index) {
  $(this).click(function() {
    localStorage.selectedTab = index + 1;
    ...
});

Answer 2

问题可能是localStorage.selectedTab 返回一个字符串而不是一个整数值。

所以你可以写parseInt(localStorage.selectedTab) - 1，而不是localStorage.selectedTab - 1，如果localStorage 为1，它可能会产生11。

例子：

> localStorage.test = 1
< 1
> localStorage.test + 1
< "11"