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

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

 

posted @ 2021-12-21 16:50  前端白雪  阅读(877)  评论(0)    收藏  举报