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表示被選中效果的類名
}
});
});
這樣就可以完美的解決了,希望可以幫助到大家。
相關文章
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- 為 FragmentTabhost 新增 tab 點選事件,在頁面跳轉之前Fragment事件
- uni-APP 新增頁面實現路由跳轉APP路由
- JS實現各種級別直接的頁面跳轉@重新整理頁面@框架集的綜合案例JS框架
- js實現操作成功之後自動跳轉頁面JS
- 成品直播原始碼,html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- js頁面跳轉JS
- jquerymobile通過a標籤頁面跳轉後,樣式丟失、js失效的解決方法jQueryJS
- JSP頁面中新增完一個專案後,重新整理頁面出現的問題JS
- javascript頁面重新整理和跳轉JavaScript
- PHP中實現頁面跳轉PHP
- js頁面跳轉的問題(跳轉到父頁面、最外層頁面、本頁面)JS
- js跳轉頁面方法(轉)JS
- PHP頁面跳轉如何實現延時跳轉PHP
- 根據userAgent實現跳轉到移動或者pc頁面程式碼
- struts2實現登入後跳轉回本頁面
- javascript控制頁面(含iframe進行頁面跳轉)跳轉、重新整理的方法彙總JavaScript
- 點選連結跳轉到應用指定頁面
- jQuery點選平滑跳轉到頁面指定位置jQuery
- js在一定時間內跳轉頁面及各種頁面重新整理JS
- javascript實現為指定元素新增class樣式類JavaScript
- jQuery新增或者刪除class樣式類程式碼例項jQuery
- PHP頁面跳轉幾種實現方法PHP
- [轉]spring mvc註解方式實現嚮導式跳轉頁面SpringMVC
- 解決vue.js打包過後點選詳情頁面在伺服器中重新整理頁面空白Vue.js伺服器
- asp.net中一個頁面跳轉,後一個頁面操作內容後返回先前頁面,並使得先前頁面資料重新整理ASP.NET
- 倒數計時指定時間之後實現頁面跳轉效果
- Android 頁面跳轉動畫的兩種實現方式Android動畫
- jsp頁面中點選(checkbox)或者radio隱藏trJS
- HTML meta refresh 重新整理與跳轉(重定向)頁面HTML
- ASP.NET頁面重新整理和定時跳轉ASP.NET
- Next.js頁面之間跳轉新增loading bar功能JS
- js重新整理頁面JS
- asyUI分頁中,如何實現頁面跳轉,再返回時,...UI
- 如何實現在指定的時間後網頁實現跳轉網頁
- Flutter頁面跳轉到IOS原生介面 如何實現?FlutteriOS
- js實現的iframe呼叫父頁面函式JS函式
- 如何讓兩個頁面跳轉但是不重新整理頁面。返回時前一個頁面開始選擇的資料還在