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

最新推荐文章于 2025-06-30 12:25:16 发布

御风傲天

最新推荐文章于 2025-06-30 12:25:16 发布

阅读量2.6w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： js 文章标签： tab切换刷新 H5 sessionStorage

本文链接：https://blog.youkuaiyun.com/yufengaotian/article/details/79710579

js 专栏收录该内容

47 篇文章

订阅专栏

本文介绍如何利用H5的sessionStorage缓存记录当前选中的tab选项卡，确保页面刷新后能返回到之前的位置。通过jQuery实现点击事件，保存当前选项卡的索引，并在页面加载时恢复该状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中经常用到标题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;
    	}