jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法
做項(xiàng)目的時(shí)候遇到這個(gè)問題,,按理說只要是會(huì)套模板的,就不該出現(xiàn)這種低級(jí)問題。然后我的后臺(tái)并沒有模板,,并且我的js,jquery水平是小學(xué)水平,所以這個(gè)也困擾了我將近一下午。在此總結(jié)一下,分享給大家。分享使我快樂?。?!
一、請(qǐng)看代碼,容我分析一下

1、首先,menu代表我的菜單列表,a標(biāo)簽即是點(diǎn)擊的鏈接。大致思路是先獲取a鏈接的對(duì)象,然后進(jìn)行循環(huán),先取得a鏈接的href的值。
2、獲取跳轉(zhuǎn)后,該頁面的url的值。進(jìn)行比較即可
3、在此需要注意,自己也打印一下,看看如何取值進(jìn)行對(duì)比。
4、對(duì)比之后,Url相同的,去掉點(diǎn)擊之前那個(gè)a對(duì)象的class屬性,并給現(xiàn)在的a鏈接加上樣式。
二、實(shí)現(xiàn)過程
寫博客最怕的就是,一頓分析猛如虎,實(shí)際操作0/5,所以在此呢就進(jìn)行一些步驟解析:

這個(gè)是調(diào)試對(duì)比的過程。
上面的是獲取的a鏈接的href值。在此需要注意,因?yàn)槭窃谘h(huán)狀態(tài),所以有很多個(gè)a鏈接的href值。
下面是獲取該頁面的url的值,有圖可知,兩個(gè)并不相等,是有細(xì)微的差異的,不過影響不大。
三,jquery對(duì)于字符串的截取
var length = String(window.location).lastIndexOf('?');
var url = String(window.location).substring(0,length);
1、jquery的lastIndexof返回的是該符號(hào)最后一次出現(xiàn)的位置,即數(shù)字。
由此我們可以得到url的?出現(xiàn)的位置
2、substring是截取字符串的函數(shù)。我們這里是表示,從第0位開始截取,截取的長度是length值。
3、截取成功之后:
if ($($(this))[0].href == url) {
$('#menu li a').removeClass("selected");
$(this).parent().addClass('selected');
}
對(duì)比一下,url相等則加一些樣式。
四、實(shí)現(xiàn)效果

這個(gè)就是效果圖了。當(dāng)實(shí)現(xiàn)點(diǎn)擊“設(shè)備分類”欄目的時(shí)候,頁面進(jìn)行跳轉(zhuǎn),且跳轉(zhuǎn)之后顯示粉色,代表當(dāng)前頁面是該頁面。
end.
最后吐槽下,這個(gè)markdown編輯器是真的不會(huì)用,寫了好幾次,排版還是一如既往的辣雞。。。不會(huì)用啊不會(huì)用 TOT
以上這篇jquery實(shí)現(xiàn)點(diǎn)擊a鏈接,跳轉(zhuǎn)之后,該a鏈接處顯示背景色的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼,通過簡單的自定義函數(shù)實(shí)現(xiàn)頁面樣式切換功能,非常簡潔實(shí)用,需要的朋友可以參考下2015-08-08
jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
jQuery基于toggle實(shí)現(xiàn)click觸發(fā)DIV的顯示與隱藏問題分析
這篇文章主要介紹了jQuery基于toggle實(shí)現(xiàn)click觸發(fā)DIV的顯示與隱藏,結(jié)合實(shí)例形式分析了toggle方法用于切換頁面元素樣式的相關(guān)使用技巧,需要的朋友可以參考下2016-06-06
jquery ui bootstrap 實(shí)現(xiàn)自定義風(fēng)格
本文主要是給大家分享了jQuery UI bootstrap的自定義風(fēng)格,以及自定義的方法,非常的實(shí)用,有需要的小伙伴千萬不要錯(cuò)過2014-11-11
jQuery完成表單驗(yàn)證的實(shí)例代碼(純代碼)
這篇文章主要介紹了jquery完成表單驗(yàn)證的實(shí)例代碼,代碼簡單易懂,需要的朋友可以參考下2017-09-09

