頁面重新整理後,tab記住重新整理前位置
阿新 • • 發佈:2018-12-12
最近兩週,時間頗趕,源於對自己身為一個前端的不自信,感覺自己不會的很多。兩週過去了,專案如期完成,我來踩坑了。剩餘的頗多不足就慢慢完善吧!
今天遇到一個問題,頁面重新整理後,對於有tab按鈕的頁面,每次重新整理都預設回到第一個,自己都煩了,想想是別人使用,估計會更煩。於是就百度踩坑呀。
效果圖鎮樓:
主要使用到Session Storage,瀏覽器快取原理。
開啟偵錯程式:
能看到快取值:
下面我要強迫自己寫demo了:
<div class="demo"> <ul class="tab-hd clearfix"> <li class="active">基本資訊</li> <li>課程詳情</li> <li>視訊管理</li> <li>講義管理</li> <li>習題管理</li> </ul> <div class="tab-bd" style="display: block;">這是基本資訊</div> <div class="tab-bd">這是課程詳情</div> <div class="tab-bd">這是視訊管理</div> <div class="tab-bd">這是講義管理</div> <div class="tab-bd">這是習題管理</div> </div>
頁面樣式:
<style> body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,form,input,textarea,th,td,select{ margin:0; padding:0; } body{ font-family: 'Microsoft Yahei',sans-serif,arial; font-size: 14px; line-height: 150%; color: #333;} li{ list-style: none; } .clearfix{ *zoom:1; } .clearfix:after{ display: block; content:""; height: 0; clear: both; 1font-size: 0; overflow: hidden; visibility: hidden; } .demo{ margin-left: 100px; margin-top: 100px; width: 450px; border: 1px solid #eaeaea; } .tab-hd li{ width: 90px; height: 30px; line-height: 30px; background: #f2f2f2; text-align: center; float: left; cursor: pointer; } .tab-hd li.active{ background: #04a7ec; color: #fff; } .tab-bd{ font-size: 16px; display: none; height: 300px; line-height: 300px; text-align: center;} </style>
jq:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ var getIndexNum = sessionStorage.getItem("tabLiNum"); $(".tab-hd li").eq(getIndexNum).addClass('active').siblings().removeClass('active'); $(".tab-bd").eq(getIndexNum).show().siblings(".tab-bd").hide(); $(".tab-hd li").on('click',function(){ $(this).addClass('active').siblings().removeClass('active'); $(".tab-bd").eq($(this).index()).show().siblings(".tab-bd").hide(); var indexNum = $(this).index(); //所點選li的索引值 console.log("當前li的下標為:",indexNum); //列印索引值 sessionStorage.setItem("tabLiNum",indexNum); //將(下標名稱,索引值)存入session中 }) }) </script>
初次寫稿,希望對你有所幫助,如有幫助的話,評論下唄,鼓勵一下我,哈哈哈!!!