tab选项卡切换后 刷新页面如何停留在当前选项卡页面

在项目中经常用到标题tab选项卡，来切换不同的内容，但是每次刷新后，都会回到默认显示页，如果在其他页面执行操作后刷新，跑到默认页而不是当前页，就很恶心了。本例主要是是利用H5的，sessionStorage缓存，来记录下标，从而在页面刷新时，回到相应的页面。记得引用JQuery,代码如下。css基于layui.css

 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		  <ul class="layui-tab-title">
		    <li class="layui-this">大厅公告图片</li>
		    <li>联系客服图片</li>
		    <li>帮助说明图片</li>
		    <li>代理平台公告</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
		    	<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图1：
				    <div class="layui-upload-list" id="demo2"></div>
				 </blockquote>
				</div>
		    </div>
		    <!--联系客服图片上传-->
		    <div class="layui-tab-item">
		    	<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图2：
				    <div class="layui-upload-list" id="demo2"></div>
				 </blockquote>
				</div>
		    </div>
		    <!--帮助说明图片上传-->
		    <div class="layui-tab-item">
		    	<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图3：
				    <div class="layui-upload-list" id="demo3"></div>
				 </blockquote>
				</div>
		    </div>
		    <!--代理平台公告图片上传-->
		    <div class="layui-tab-item">
		    	<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图4：
				    <div class="layui-upload-list" id="demo4"></div>
				 </blockquote>
				</div>
		    </div>
		  </div>
		</div> 

<script>
	$(".layui-tab-title li").click(function(){
		var picTabNum = $(this).index();
		console.log("当前图片标题下标是："+picTabNum);
		sessionStorage.setItem("picTabNum",picTabNum);
	});
	$(function(){
		var getPicTabNum = sessionStorage.getItem("picTabNum");
		$(".layui-tab-title li").eq(getPicTabNum).addClass("layui-this").siblings().removeClass("layui-this");
		$(".layui-tab-content>div").eq(getPicTabNum).addClass("layui-show").siblings().removeClass("layui-show");
	})
</script>

.tltbox {
    margin-bottom: 15px;
    line-height: 30px;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
}
#demo2 img{
    		width: 80px;
    		height: 80px;
    	}
    	.layui-upload{
    		margin-left: 20px;
    	}
    	.layui-tab{
    		padding: 0 10px;
    	}