localstorage本地存储样式实例

最新推荐文章于 2021-04-19 16:26:54 发布

夏末_阳光依然耀眼

最新推荐文章于 2021-04-19 16:26:54 发布

阅读量327

点赞数

分类专栏： localstorage javascript jquery

本文链接：https://blog.csdn.net/boyit0/article/details/84849646

版权

javascript 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

jquery

39 篇文章 0 订阅

订阅专栏

localstorage

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="utf-8" /> 
  <title>localstorage本地存储样式实例</title> 
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
  <style>
*{margin:0; padding:0;}
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> 
 </head> 
 <body> 
  <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>
 </body>
</html>