Remember when writing static pages, in order to achieve highlighting are in each page with a different style, ah. Highlighting I think for the Web front-end, is the more commonly used effect, just this time again to use, specially sorted out I wrote two types of highlighting.
In fact, the idea is very simple, the first method is to determine whether the HREF value is contained in the browser's current URL value by traversing the href value of the link group. This method has some limitations, for example, the menu in the IFRAME can not be judged; The second method is more widely used, the realization of the idea is relatively simple, that is, through the judgment click, to load the highlight style.
The first is to determine the current URL value highlighting class code:
Copy Code code as follows:
@Mr. See---Judge 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 highlighted.
Call Method:
Window.onload=function Highthis () {Highurl ("Youid", "Youhighclass");}
The second click to highlight the current class:
Copy Code code as follows:
@Mr. See---Click Implementation 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 displayed after the click.
Call Method:
Window.onload=function Highthis () {Highonclick ("Youid", "Youhighclass");}
This method is more extensible, for example, by judging the Parentnode.nodename value to make a type of link not traversed, and so on.
SOURCE Download and Demo
Since a friend doesn't know how to use it, I specifically sorted out the pages I wrote earlier about this class, giving a demo page and a download address that a friend needs to be able to view or download.
Package Download Address
