jquery to achieve navigation highlighting method "with demo source download" _jquery

This article illustrates the method of implementing the navigation highlighting in jquery. Share to everyone for your reference, specific as follows:

Navigation is an element that is commonly needed on our pages, it can be said to be a site must use elements, there is no navigation, people can not find the north, but sometimes, only the navigation is not enough, but also need to mark the current page in which category is currently in which, this time there are different methods of implementation, There are also some of the following introductions.

Usually, when we do the navigation, the program directly output the current page of the highlight state of the style, we only need to define the output of the class highlighting the style can be, this is the most direct and effective is the most commonly used method.

Like WordPress's navigation output, will automatically output a highlighted class "current", the following figure:

But sometimes, when we're in a program that contains files, such as a unified head and bottom, there's a navigation in the unified head, and if the careless programmer doesn't have the time to output a highlighted class to the directory or file that is currently in place, or sometimes it's very troublesome to do so, Can there be some way to achieve and remedy the fact?

The answer is yes, that is JS.

But how do you highlight the current directory or file according to what rules?

Recently happened in the project also encountered this problem, so through a toss, to achieve the effect.

My idea is this, first find the path to the current URL, then the URL of the last file name or directory and the elements of the navigation element to match, matching the successful combination of the highlighted class, the other is not the current matching class of the highlight style removed, unsuccessful time to return to the home page this to highlight.

So there is the following code, tested, whether the file or directory can match the success:

THML:

<ul class= "Menu" id= "menu" >
 <li><a title= "Home" href= "index.html" rel= "index.html" > Home </a> </li>
 <li ><a title= "Works set" href= "works.html" rel= "works.html" > Works </a></li>
 <li><a title= "front-end Library" href= "web.html" rel= "web.html" > Front-End library </a></li>
</ul>

JS Code:

<script type= "Text/javascript" >
 var urlstr = location.href;
 var Urlstatus=false;
 $ ("#menu a"). each (the function () {
 if (urlstr + '/'). IndexOf ($ (this). attr (' rel ')) > -1&&$ (This). attr (' Rel ')!= ') {
  $ (this). addclass (' cur '); urlstatus = true;
 } else {
  $ (this). Removeclass (' cur ');
 }
 );
 if (!urlstatus) {$ ("#menu a"). EQ (0). addclass (' cur ');
</script>

Don't forget, the script is based on jquery.

Full instance code click here to download the site .

More interested readers of jquery-related content can view the site topics: "jquery window Operation tips Summary", "jquery drag and drop effects and tips summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery Table" ( Table) Summary of operations tips, jquery Extended techniques Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.