HTML照片墙刷新后改变位置,页面刷新后，tab记住刷新前位置

页面刷新后，对于有tab按钮的页面，每次刷新都默认回到第一个，自己都烦了，想想是别人使用，估计会更烦。于是就百度踩坑呀。

效果图镇楼：

主要使用到Session Storage，浏览器缓存原理。

打开调试器：

能看到缓存值：

下面我要强迫自己写demo了：

• 基本信息
• 课程详情
• 视频管理
• 讲义管理
• 习题管理

这是基本信息 这是课程详情 这是视频管理 这是讲义管理 这是习题管理

页面样式：

body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,form,input,textarea,th,td,select{ margin:0; padding:0; }

body{ font-family: &＃8216;Microsoft Yahei&＃8217;,sans-serif,arial; font-size: 14px; line-height: 150%; color: #333;}

li{ list-style: none; }

.clearfix{ *zoom:1; }

.clearfix:after{ display: block; content:&＃8221;&＃8221;; height: 0; clear: both; 1font-size: 0; overflow: hidden; visibility: hidden; }

.demo{ margin-left: 100px; margin-top: 100px; width: 450px; border: 1px solid #eaeaea; }

.tab-hd li{ width: 90px; height: 30px; line-height: 30px; background: #f2f2f2; text-align: center; float: left; cursor: pointer; }

.tab-hd li.active{ background: #04a7ec; color: #fff; }

.tab-bd{ font-size: 16px; display: none; height: 300px; line-height: 300px; text-align: center;}

js：

$(function(){

var getIndexNum = sessionStorage.getItem(&＃8220;tabLiNum&＃8221;);

$(&＃8220;.tab-hd li&＃8221;).eq(getIndexNum).addClass(&＃8216;active&＃8217;).siblings().removeClass(&＃8216;active&＃8217;);

$(&＃8220;.tab-bd&＃8221;).eq(getIndexNum).show().siblings(&＃8220;.tab-bd&＃8221;).hide();

$(&＃8220;.tab-hd li&＃8221;).on(&＃8216;click&＃8217;,function(){

$(this).addClass(&＃8216;active&＃8217;).siblings().removeClass(&＃8216;active&＃8217;);

$(&＃8220;.tab-bd&＃8221;).eq($(this).index()).show().siblings(&＃8220;.tab-bd&＃8221;).hide();

var indexNum = $(this).index(); //所点击li的索引值

console.log(&＃8220;当前li的下标为：&＃8221;,indexNum); //打印索引值

sessionStorage.setItem(&＃8220;tabLiNum&＃8221;,indexNum); //将(下标名称，索引值)存入session中

})

})

这下怎么刷新也不怕了！！！快去测试吧