JS implementation of the current navigation menu highlighting

In order to increase user experience, increase the usability and aesthetics of the Web page, often need to put the current navigation menu in a special way to display, usually highlighting or have different from other menu background, there are two ways to achieve, the first is to use pure CSS to achieve, the second is the use of JS Auxiliary CSS to achieve, two methods are relatively simple, The relative JS is more simple, the following introduction to use JS to achieve the method:

The home page assumes that our navigation code is written like this:

<div id= "Navi" >
<ul>
<li><a href= "1.html" > Home </a></li>
<li><a href= "2.html" > Column 1</a></li>
</ul>
</div>

Here is the JS code:
<script type= "Text/javascript" language= "JavaScript" >
var nav = document.getElementById ("Navi");
var links = nav.getelementsbytagname ("Li");
var Lilen = Nav.getelementsbytagname ("a");
var currenturl = Document.location.href;
var last = 0;
for (Var i=0;i<links.length;i++)
{
var linkurl = Lilen[i].getattribute ("href");
if (Currenturl.indexof (linkurl)!=-1)
{
last = i;
}
}
Links[last].classname = "HL";
</script>

Copy this JS code and add it to the body. Attention:
1.getElementById ("Navi"); the Navi in parentheses must be consistent with Navi in <div id= "Navi" >.
2.js code must be added to the body, which is added to the bottom of the navigation, can not be added to the head, or the error can not be used.
3.links[last].classname = "HL"; HL is the style class name of the highlighted code.
Finally, write a highlight of the CSS code can be, as follows:
#navi ul Li.hl a{
Color: #123456;
}
This enables the current navigation menu to be highlighted.

JS implementation of the current navigation menu highlighting