兩種簡單實(shí)現(xiàn)菜單高亮顯示的JS類代碼
更新時(shí)間：2010年06月27日 02:44:18 作者：
近期在寫一個(gè)博客管理后臺的前端,涉及在同一頁面兩種高亮顯示當(dāng)前菜單的需求.
記得當(dāng)年寫靜態(tài)頁時(shí),為了實(shí)現(xiàn)高亮都是在每個(gè)頁面加不同的樣式,呵.高亮顯示我覺得對于web前端來說,是比較常用到的效果,正好此次又要用到,特地整理出我所寫的兩種高亮類.
其實(shí)思路很簡單,第一種方法是通過遍歷鏈接組的href值,通過indexOf判斷href值是否被包含在瀏覽器當(dāng)前url值中.此方法有一定局限,比如對于iframe內(nèi)的菜單是不能這樣判斷的; 第二種方法適用范圍更廣一樣,實(shí)現(xiàn)思路也比較簡單,即通過判斷點(diǎn)擊,給點(diǎn)擊項(xiàng)加載高亮樣式.
第一種判斷當(dāng)前URL值高亮類代碼:
//@Mr.Think---判斷URL實(shí)現(xiàn)菜單高亮顯示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0; i<links.length; i++ ){
var menuLink=links[i].href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur;
}
}
}
參數(shù)說明:
1.menuId : 鏈接組所在ID;
2.classCur : 高亮顯示時(shí)的樣式class名.
調(diào)用方法:
window.onload=function highThis(){highURL("youId","youhighclass");}
第二種點(diǎn)擊后高亮顯示當(dāng)前類:
//@Mr.Think---點(diǎn)擊實(shí)現(xiàn)高亮顯示
function highOnclick(elemId,classCur) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = "";
this.className = classCur;
this.blur();
}
}
}
}
參數(shù)說明:
1.elemId : 鏈接組所在ID;
2.classCur : 點(diǎn)擊后顯示的樣式class名.
調(diào)用方法:
window.onload=function highThis(){highOnclick("youId","youhighclass");}
此方法擴(kuò)展性較強(qiáng),比如可以通過判斷parentNode.nodeName值來使某一類型鏈接不被遍歷,等等.
源碼下載及演示
鑒于有朋友不知道如何使用,我特地整理了一下我之前寫的與這個(gè)類有關(guān)的頁面,給一個(gè)DEMO頁面和下載地址,需要的朋友可以查看或下載.
打包下載地址
其實(shí)思路很簡單,第一種方法是通過遍歷鏈接組的href值,通過indexOf判斷href值是否被包含在瀏覽器當(dāng)前url值中.此方法有一定局限,比如對于iframe內(nèi)的菜單是不能這樣判斷的; 第二種方法適用范圍更廣一樣,實(shí)現(xiàn)思路也比較簡單,即通過判斷點(diǎn)擊,給點(diǎn)擊項(xiàng)加載高亮樣式.
第一種判斷當(dāng)前URL值高亮類代碼:
復(fù)制代碼 代碼如下:
//@Mr.Think---判斷URL實(shí)現(xiàn)菜單高亮顯示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0; i<links.length; i++ ){
var menuLink=links[i].href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur;
}
}
}
參數(shù)說明:
1.menuId : 鏈接組所在ID;
2.classCur : 高亮顯示時(shí)的樣式class名.
調(diào)用方法:
window.onload=function highThis(){highURL("youId","youhighclass");}
第二種點(diǎn)擊后高亮顯示當(dāng)前類:
復(fù)制代碼 代碼如下:
//@Mr.Think---點(diǎn)擊實(shí)現(xiàn)高亮顯示
function highOnclick(elemId,classCur) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = "";
this.className = classCur;
this.blur();
}
}
}
}
參數(shù)說明:
1.elemId : 鏈接組所在ID;
2.classCur : 點(diǎn)擊后顯示的樣式class名.
調(diào)用方法:
window.onload=function highThis(){highOnclick("youId","youhighclass");}
此方法擴(kuò)展性較強(qiáng),比如可以通過判斷parentNode.nodeName值來使某一類型鏈接不被遍歷,等等.
源碼下載及演示
鑒于有朋友不知道如何使用,我特地整理了一下我之前寫的與這個(gè)類有關(guān)的頁面,給一個(gè)DEMO頁面和下載地址,需要的朋友可以查看或下載.
打包下載地址
您可能感興趣的文章:
- angularjs實(shí)現(xiàn)搜索的關(guān)鍵字在正文中高亮出來
- Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
- jsp網(wǎng)頁搜索結(jié)果中實(shí)現(xiàn)選中一行使其高亮
- 用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- 用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼
- Javascript實(shí)現(xiàn)的CSS代碼高亮顯示
- javascript 關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- javascript高亮效果的二種實(shí)現(xiàn)方法
- js 玩轉(zhuǎn)正則表達(dá)式之語法高亮
- JavaScript實(shí)現(xiàn)的搜索及高亮顯示功能示例
相關(guān)文章
JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧
這篇文章主要為大家介紹了JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了js離開或刷新頁面檢測(且兼容FF,IE,Chrome)。需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進(jìn)行AES加密解密操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
velocity.js實(shí)現(xiàn)頁面滾動(dòng)切換效果
這篇文章主要介紹了velocity.js實(shí)現(xiàn)頁面滾動(dòng)切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)新聞輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析
這篇文章主要介紹了小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js字符串轉(zhuǎn)json對象的四種實(shí)現(xiàn)方法
使用ajax的開發(fā)項(xiàng)目過程中,經(jīng)常需要將json格式的字符串返回到前端,前端解析成js對象(JSON),下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)json對象的四種實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之棧詳解,本文講解了對棧的操作、對棧的實(shí)現(xiàn)實(shí)例等內(nèi)容,需要的朋友可以參考下2016-02-02
JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)
發(fā)現(xiàn)原來的方法還有是有幾個(gè)問題：首先Js代碼冗余，導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接，還有導(dǎo)航條本身用fixed定位，但沒有被設(shè)置為水平居中，而是在JS中更改left值使其居中2013-09-09
分離與繼承的思想實(shí)現(xiàn)圖片上傳后的預(yù)覽功能：ImageUploadView
本文要介紹的是網(wǎng)頁中常見的圖片上傳后直接在頁面生成小圖預(yù)覽的實(shí)現(xiàn)思路，考慮到該功能有一定的適用性，于是把相關(guān)的邏輯封裝成了一個(gè)ImageUploadView組件，實(shí)際使用效果可查看下一段的git效果圖2016-04-04