解決方法有兩種:一種是直接給當(dāng)前頁面添加特殊樣式,當(dāng)網(wǎng)頁刷新或者跳轉(zhuǎn)到下一頁后,樣式消失;另一種情況是即使刷新頁面后樣式仍然有效。
直接上代碼:
第一種情況:
<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;//防止頁面跳轉(zhuǎn) }); }); }); </script> <div class="nav"> <ul> <li><a href="1.html" class="hover"> 首頁</a></li> <li><a href="2.html"> 個(gè)人資料</a></li> <li><a href="3.html"> 我的好友</a></li> <li><a href="4.html"> 消息管理</a></li> </ul> </div>第二種情況:
<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> <div class="nav"> <ul> <li><a href="1.html"> 首頁</a></li> <li><a href="2.html"> 個(gè)人資料</a></li> <li><a href="3.html"> 我的好友</a></li> <li><a href="4.html"> 消息管理</a></li> </ul> </div> 以上這篇Jquery給當(dāng)前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持武林網(wǎng)。
|
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注