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

Posted 看起来没睡醒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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本地存储应用实例,刷新后选项卡停留在点开页面的主要内容,如果未能解决你的问题,请参考以下文章

Blazor Server 如何跨多个选项卡和刷新保存数据

Ion-Toggle 刷新后它必须从本地存储中取回数据

反应应用程序本地存储未设置

jquery ui tabs 高手帮忙怎么实现!

HTML5 <audio> 标签 - 自动播放,即使选项卡没有焦点

HTML5 本地存储与会话存储