利用Jquery給當前頁或者跳轉後頁面的導航欄添加選中後樣式

當鼠標選中頁面導航欄的某一欄目後，如何給選中欄目添加特殊樣式，一直沒怎麼搞清楚，今天學習了一下，並作個總結。

這邊有兩種狀況，一種是直接給當前頁面添加特殊樣式，當網頁刷新或者跳轉到下一頁後，樣式消失；另外一種狀況是即便刷新頁面後樣式仍然有效。

直接上代碼：

第一種狀況：

<script>  
$(document).ready(function(){  
    $(".nav a").each(function(){  
        $(this).click(function(){  
            $(".nav .hover").removeClass("hover");  
            $(this).addClass("hover");    
            return false;//防止頁面跳轉  
        });  
    });  
});  
</script>

  

<div class="nav">  
<ul>  
    <li><a href="1.html" class="hover"> 首頁</a></li>  
    <li><a href="2.html"> 我的資料</a></li>  
    <li><a href="3.html"> 個人好友</a></li>  
    <li><a href="4.html"> 消息管理</a></li>   
</ul>     
</div>

 

第二種狀況：

<script ">  
$(document).ready(function(){  
    $(".nav a").each(function(){  
        $this = $(this);  
        if($this[0].href==String(window.location)){  
            $this.addClass("hover");  
        }  
    });  
});  
</script>

  

<div class="nav">  
<ul>  
    <li><a href="1.html"> 首頁</a></li>  
    <li><a href="2.html"> 我的資料</a></li>  
    <li><a href="3.html"> 個人好友</a></li>  
    <li><a href="4.html"> 消息管理</a></li>   
</ul>     
</div>