Two simple implementation of the menu highlighting the JS class (reproduced)

Recently wrote a blog management background front end, involves two kinds of highlighting the current menu on the same page. Remember when the static page, in order to achieve highlighting are in each page with a different style, uh. Highlighting I think for the Web front end, is more commonly used to the effect, just this time again to use, I specifically sorted out the two types of highlighting I wrote.

In fact, the idea is very simple, the first method is to traverse the link Group's href value, through indexof to determine whether the HREF value is included in the browser's current URL value. This method has some limitations, such as the menu within the IFRAME can not be judged; The second method applies to a wider range, the realization of the idea is relatively simple, that is, by judging the click, to click the item load highlight style.

The first to judge the current URL value highlight class code:

@Mr. Think---Determine URL implementation menu highlighting
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;
}
}
}

Parameter description:

1. menuId: The ID of the link group;
2. Classcur: The style class name when highlighting.

Call Method:

Window.onload=function Highthis () {Highurl ("Youid", "Youhighclass");}

The second type of click highlights the current class:

@Mr. Think---Click to implement highlighting
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 ();
}
}
}
}

Parameter description:

1. Elemid: The ID of the link group;
2. Classcur: The style class name that is displayed after the click.

Call Method:

Window.onload=function Highthis () {Highonclick ("Youid", "Youhighclass");}

This method is more extensible, such as by judging the parentnode.nodename value to make certain types of links not traversed, and so on.

Two simple implementation of the menu highlighting the JS class (reproduced)