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

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

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

直接上代碼:

第一種情況:

[html] 

在CODE上查看代碼片派生到我的代碼片

<script type="text/javascript" src="templets/js/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

    $(".nav a").each(function(){  

        $(this).click(function(){  

            $(".nav .hover").removeClass("hover");  

            $(this).addClass("hover");    

            return false;//防止頁面跳轉  

        });  

    });  

});  

</script>  

  

<p 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>     

</p>  

 

第二種情況:

[html] 

在CODE上查看代碼片派生到我的代碼片

<script type="text/javascript" src="templets/js/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

    $(".nav a").each(function(){  

        $this = $(this);  

        if($this[0].href==String(window.location)){  

            $this.addClass("hover");  

        }  

    });  

});  

</script>  

  

<p 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>     

</p>  

發佈留言