JS implementation of the current navigation menu highlighting

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.