js實現菜單高亮顯示的javascript類代碼

//@mr.think---點擊實現高亮顯示

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();
}
}
}
}

數說明:

1.elemid : 連結組所在id;
2.classcur : 點擊後顯示的樣式class名.
調用方法:

window.onload=function highthis(){highonclick("youid","youhighclass");}

 

//@mr.think---判斷url實現菜單高亮顯示
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;
}
}
}

參數說明:

1.menuid : 連結組所在id;
2.classcur : 高亮顯示時的樣式class名.

調用方法:

window.onload=function highthis(){highurl("youid","youhighclass");}
第一種方法是通過遍曆連結組的href值,通過indexof判斷href值是否被包含在瀏覽器當前url值中.此方法有一定局限,比如對於iframe內的菜單是不能這樣判斷的; 第二種方法適用範圍更廣一樣,實現思路也比較簡單,即通過判斷點擊,給點擊項載入高亮樣式.