快捷導(dǎo)航

兩種簡(jiǎn)單實(shí)現(xiàn)菜單高亮顯示的JS類代碼

更新時(shí)間：2010年06月27日 02:44:18 作者：

近期在寫一個(gè)博客管理后臺(tái)的前端,涉及在同一頁面兩種高亮顯示當(dāng)前菜單的需求.

記得當(dāng)年寫靜態(tài)頁時(shí),為了實(shí)現(xiàn)高亮都是在每個(gè)頁面加不同的樣式,呵.高亮顯示我覺得對(duì)于web前端來說,是比較常用到的效果,正好此次又要用到,特地整理出我所寫的兩種高亮類.

其實(shí)思路很簡(jiǎn)單,第一種方法是通過遍歷鏈接組的href值,通過indexOf判斷href值是否被包含在瀏覽器當(dāng)前url值中.此方法有一定局限,比如對(duì)于iframe內(nèi)的菜單是不能這樣判斷的; 第二種方法適用范圍更廣一樣,實(shí)現(xiàn)思路也比較簡(jiǎ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頁面和下載地址,需要的朋友可以查看或下載.

打包下載地址

您可能感興趣的文章: