layui中tab选项卡页面刷新后，不能停留在原选项卡页面问题解决

最新推荐文章于 2024-03-11 11:26:29 发布

cbat01

最新推荐文章于 2024-03-11 11:26:29 发布

阅读量4.3k

点赞数 7

分类专栏：前端文章标签： layui JavaScript

本文链接：https://blog.csdn.net/weixin_36270908/article/details/103086995

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

添加下面这段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");
})

完整测试代码（注意引入自己的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>