JS實現頁面跳轉或者重新整理後保留點選新增的class樣式

奮鬥中的web小白發表於2018-09-25

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表示被選中效果的類名   
            } 
        });  
    }); 

這樣就可以完美的解決了,希望可以幫助到大家。

相關文章