本地存储记住点击选项卡类

Question

基于这个例子，我试图保存单击的选项卡"a"；元素，并添加类"；活动的"；向其父对象发送"；李；要素但到目前为止还没有成功，我相信问题出在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为1的情况下生成11的localStorage.selectedTab - 1。

示例：

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