html5本地存储应用实例，刷新后选项卡停留在点开页面

标签：

<style>
ul,li{list-style: none;}
#nav{height:42px; border:1px solid #d3d3d3; background:#f7f7f7;border-radius:2px;box-shadow:1px 1px 2px rgba(0,0,0,.2);}
#nav li{float:left; height:42px; line-height:42px; padding:0 10px;
border-right:1px solid #d3d3d3; font-size:14px; font-weight:bold}
#nav li.cur{background:#f1f1f1; border-top:1px solid #f60; box-shadow:none}
#nav li a{text-decoration:none; display:block}
#nav li.cur a{color:#333}
#nav li a:hover{color:#f30}

#page{margin:20px auto}
.list{display:none}
</style>
<div id="nav">
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Javascript/Ajax/jQuery</a></li>
<li><a href="#">PHP+MYSQL</a></li>
<li><a href="#">前端观察</a></li>
<li><a href="#">HTML5/移动WEB应用</a></li>
</ul>
</div>
<div id="page">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
</div>
<script>
var show = 0; //定义默认展示的是第一个TAB选中状态
if (window.localStorage){ //如果浏览器支持localStorage
var navShow = localStorage.getItem("shownum"); //获取客户端TAB状态
if(navShow==null){ //如果为空，即第一次打开
//将默认的第一个TAB设置为选中状态并显示与其对应的list
$("#nav ul li").eq(show).addClass("cur").siblings().removeClass("cur");
$(".list").eq(show).show().siblings().hide();
}
$("#nav ul li").each(function(index){ //遍历每个TAB
var li = $(this);
show = li.attr("cur")==true?index:show; //如果当前TAB被点击选中，则将show值设为当前的索引值
if(index==navShow){ //如果当前索引值与存储的TAB状态值一致
li.addClass("cur"); //设置为选中状态样式
$(".list").eq(index).show().siblings().hide(); //显示对应的list
}
li.click(function(){ //当单击当前TAB时
li.addClass("cur").siblings().removeClass("cur");//设置为选中状态样式
$(".list").eq(index).show().siblings().hide(); //显示对应的list
localStorage.setItem("shownum",index); //将TAB选中状态存储到本地
});
});
}else{//如果浏览器不支持localStorage
alert(‘您的浏览器不支持localStorage.‘);
}
</script>

html5本地存储应用实例，刷新后选项卡停留在点开页面

标签：

原文地址：http://www.cnblogs.com/he-qiang/p/5567754.html