layui中tab選項卡頁面重新整理後，不能停留在原選項卡頁面問題解決
阿新 • • 發佈：2021-12-21
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