Jquery給當(dāng)前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實(shí)例
解決方法有兩種:一種是直接給當(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í)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 簡單的jquery左側(cè)導(dǎo)航欄和頁面選中效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- 用jquery的方法制作一個(gè)簡單的導(dǎo)航欄
- jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
- jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果
- jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
- jQuery Mobile 導(dǎo)航欄代碼
- jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
- jQuery實(shí)現(xiàn)帶展開動(dòng)畫的導(dǎo)航欄效果
相關(guān)文章
通過jQuery源碼學(xué)習(xí)javascript(三)
承接上兩篇繼續(xù)寫下去。我盡量把我明白的地方給大家說清楚。有些大家的提問我也有點(diǎn)搞不明白,如果有人能解答,再好不過了2012-12-12jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條,使用jQuery EasyUI的朋友可以參考下。2011-09-09jquery checkbox 勾選的bug問題解決方案與分析
本文首先由一個(gè)在項(xiàng)目中遇到的jquery checkbox 勾選的bug的解決方案,引申出jQuery中attr()和prop()的差異分析,非常的實(shí)用,需要的小伙伴快來研究下吧2014-11-11jQuery第一次運(yùn)行頁面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
下面小編就為大家分享一篇jQuery第一次運(yùn)行頁面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
多行文字圖片滾動(dòng)效果的實(shí)現(xiàn)方法有很多,本例與大家分享的是jquery實(shí)現(xiàn)的具體步驟,很實(shí)用的2014-10-10jquery-file-upload 文件上傳帶進(jìn)度條效果
這篇文章主要介紹了jquery-file-upload 文件上傳帶進(jìn)度條效果,代碼分為html部分css部分和js部分,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)
這篇文章主要介紹了jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-12-12jQuery選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
選擇器是jQuery的核心,一個(gè)選擇器寫出來類似$('#dom-id')。下面給大家分享jQuery選擇器的相關(guān)知識(shí),感興趣的朋友一起看看吧2017-07-07