JS實現頁面跳轉或者重新整理後保留點選新增的class樣式
JS實現頁面跳轉或者重新整理後保留點選新增的class樣式
專案中遇到一個問題,點選進行頁面的跳轉,但是新增的class並沒有成功。只是在當前的頁面觸發生效,進入到新的頁面就會失效。經過不斷的查閱,終於找到了一個完美的方法,使用url傳引數,然後根據引數判斷是否有必要顯示class。二話不說,直接上程式碼。
html程式碼片段:
<ul class="navUl">
<li class="active"><a href="../">首頁</a></li>
<li><a href="../tt/index.shtml">頭條</a> </li>
<li> <a href="../zx/index.shtml">資訊</a></li>
<li><a href="../hdkd/index.shtml">活動看點</a></li>
<li><a href="../wzx/index.shtml">微資訊</a></li>
</ul>
JS程式碼片段:
$(document).ready(function(){
$(".navUl li a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$(".navUl li").removeClass("active");
$this.parent().addClass("active"); //active表示被選中效果的類名
}
});
});
這樣就可以完美的解決了,希望可以幫助到大家。
相關文章
- 為 FragmentTabhost 新增 tab 點選事件,在頁面跳轉之前Fragment事件
- js實現操作成功之後自動跳轉頁面JS
- uni-APP 新增頁面實現路由跳轉APP路由
- 如何在頁面跳轉後,再返回上級頁面時,保留檢索條件,重新整理內容
- 成品直播原始碼,html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- js頁面跳轉的問題(跳轉到父頁面、最外層頁面、本頁面)JS
- PHP中實現頁面跳轉PHP
- Next.js頁面之間跳轉新增loading bar功能JS
- jQuery點選平滑跳轉到頁面指定位置jQuery
- 點選連結跳轉到應用指定頁面
- 解決vue.js打包過後點選詳情頁面在伺服器中重新整理頁面空白Vue.js伺服器
- 重定向到登入頁面後跳轉原頁面
- FioriLaunchpadTile點選後跳轉的除錯技巧除錯
- asyUI分頁中,如何實現頁面跳轉,再返回時,...UI
- Flutter頁面跳轉到IOS原生介面 如何實現?FlutteriOS
- php怎麼實現登陸後跳轉網頁PHP網頁
- 在 vue-router 跳轉過程中保留頁面元件的值狀態Vue元件
- vue頁面跳轉Vue
- Flutter頁面跳轉Flutter
- vxe-table呼叫refreshColumn重新整理列後vxe-column插槽下的元素新增的class樣式丟失
- WebSecurityConfigurerAdapter 關於成功之後頁面跳轉的配置WebAPT
- react跳轉url,跳轉外鏈,新頁面開啟頁面React
- 說說如何使用 vue-router 實現頁面跳轉Vue
- JS 將HTML頁面轉為PDF或者World 並下載JSHTML
- 直播平臺開發,實現點選跳轉外部連結時的跳轉步驟
- 2024-05-03 uni跳轉頁面a成功後會立即再跳轉到頁面b,導致無法展現頁面a ==》頁面a業務邏輯沒捋清楚
- JavaScript新增class樣式類程式碼JavaScript
- Fiori Launchpad Tile點選後跳轉的除錯技巧除錯
- Flutter:如何跳轉頁面?Flutter
- JavaScript 頁面跳轉效果JavaScript
- router跳轉page頁面
- Flutter 實現底部擴散模糊動畫(一)跳轉頁面Flutter動畫
- 頁面跳轉的幾種方法
- vue點選當前路由,如何實現重新整理當前頁Vue路由
- 如何實現頁面重新整理後不定位到之前的滾動位置?
- vue重新整理當前頁面或者當前元件Vue元件
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- ABP後臺管理頁面AdminLTE框架,實現選單項點選後,選單展開當前選單項高亮框架