兩種簡單實現菜單高亮顯示的JS類(轉載)

標籤：post   實現   類型   his   elements   http   dex   think   方法   

近期在寫一個部落格管理背景前端,涉及在同一頁面兩種高亮顯示當前菜單的需求.記得當年寫靜態頁時,為了實現高亮都是在每個頁面加不同的樣式,呵.高亮顯示我覺得對於web前端來說,是比較常用到的效果,正好此次又要用到,特地整理出我所寫的兩種高亮類.

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

第一種判斷當前URL值高亮類代碼:

//@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");}

第二種點擊後高亮顯示當前類:

//@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");}

此方法擴充性較強,比如可以通過判斷parentNode.nodeName值來使某一類型連結不被遍曆,等等.

兩種簡單實現菜單高亮顯示的JS類(轉載)