Jquery給當(dāng)前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實例

更新時間：2016年12月08日 10:43:37 投稿：jingxian

下面小編就為大家?guī)硪黄狫query給當(dāng)前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

解決方法有兩種：一種是直接給當(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"> 個人資料</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"> 個人資料</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)航欄添加選中后樣式的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-02-02
Jquery高級應(yīng)用Deferred對象原理及使用實例
這篇文章主要介紹了Jquery高級應(yīng)用Deferred對象原理及使用實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05
jQuery圖片輪播的具體實現(xiàn)
之前有碰到過jQuery實現(xiàn)列表自動滾動，這次的圖片輪播在原理上與之相同，只有一些細(xì)微的差別，就是需要在圖片的右下角顯示當(dāng)前圖片的序號
2013-09-09
firefox下jquery ajax返回object XMLDocument處理方法
使用jquery ajax處理struts2 返回json類型的時候，ajax執(zhí)行成功返回結(jié)果為object XMLDocument，解決方法如下
2014-01-01
jquery處理json數(shù)據(jù)實例分析
json數(shù)據(jù)是一種經(jīng)型的實時數(shù)據(jù)交互的數(shù)據(jù)存儲方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來給大家介紹jquery處理json數(shù)據(jù)方法。
2014-06-06
jquery 無限級聯(lián)菜單案例分享
phpcms的地區(qū)級聯(lián)菜單，感覺寫的挺有意思于是自己也實現(xiàn)了個，感興趣的各位路過的可以參考下哈，希望本例可以幫助到你
2013-03-03
Spring shiro + bootstrap + jquery.validate 實現(xiàn)登錄、注冊功能
這篇文章主要介紹了Spring shiro + bootstrap + jquery.validate 實現(xiàn)登錄、注冊功能,需要的朋友可以參考下
2017-06-06
JQuery教學(xué)之性能優(yōu)化
jQuery是一款非常優(yōu)秀的javascript框架，當(dāng)我們使用到j(luò)Query后就再也不想回到j(luò)avascript時冗長的代碼，那么jQuery的優(yōu)化就擺在了我們的面前。那么我們優(yōu)化JQuery應(yīng)該從那些方面入手呢？
2014-05-05
jQuery瀑布流插件Wookmark使用實例
Wookmark jQuery插件大致使用position:absolute來重構(gòu)內(nèi)容實現(xiàn)瀑布流布局,需要的朋友可以參考下
2014-04-04
jQuery 獲取多選框的值及多選框中文的函數(shù)
這篇文章主要介紹了jQuery 獲取多選框的值及多選框中文的函數(shù)的相關(guān)資料,需要的朋友可以參考下
2016-05-05