layui中tab选项卡页面刷新后，不能停留在原选项卡页面问题解决
前端
专栏收录该内容
32 篇文章0 订阅
订阅专栏
添加下面这段js代码即可
$(".layui-tab-title li").click(function(){
var picTabNum = $(this).index();
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");
})
1
2
3
4
5
6
7
8
9
完整测试代码（注意引入自己的layui.css/layui.js/jquery.min.js）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="layui.css">
<title></title>
</head>
<body class="layui-view-body">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this tab1">item1</li>
<li class="tab2">item2</li>
<li class="tab3">item3</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
tab1页面---f5刷新测试
</div>
<!--item2-->
<div class="layui-tab-item">
tab2页面---f5刷新测试
</div>
<!--item3-->
<div class="layui-tab-item">
tab3页面---f5刷新测试
</div>
</div>
</div>
</body>
<script src="layui.all.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".layui-tab-title li").click(function(){
var picTabNum = $(this).index();
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>
</html>
————————————————
版权声明：本文为CSDN博主「cbat01」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_36270908/article/details/103086995
