Implementation of navigation menu highlighting (two methods) based on jquery _javascript tips

Project requirements:

Implementation principle: When the current element is selected, the current element is added with a style, and the sibling element removes the style.

Click on a different navigation menu to achieve the current click of the menu is highlighted, click the navigation below a category, the category belongs to the navigation must be highlighted, click on an article, the article belongs to the navigation menu must also be highlighted.

The effect chart is as follows:

Sample code One:

The specific example code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Example code two:

The link in the menu layer plus a Rel property, save the href attribute that is:

<div id= "Menu" class= "Main-nav" > <dl> <dt><a href= "/c000001916" class= "current" > Home &L T;span class= "MNL" ></span></a></dt> </dl> <dl> <dt><a href= " /c000001919?lmbm=1 "<span style=" color: #ff0000; >rel= "/c000001919?lmbm=1" </span>> News Center <span class= "MNL" ></span></a></dt> < DD class= "Sn-c" > <a href= "#" > Product concept 2</a> <em>|</em> <a href= "#" & gt; Development history </a> <em>|</em> <a href= "#" > Application scope </a> <em>|</em > <a href= "#" > Technical framework </a> </dd> </dl> <dl> <dt>& Lt;a href= "/c000001919?lmbm=2" <span style= "color: #ff0000;" >rel= "/c000001919?lmbm=2" </span>> Product introduction <span class= "MNL" ></span></a></dt> < DD class= "Sn-c sn3" > &Lt;a href= "#" > Product concept </a> <em>|</em> <a href= "#" > Development process 3</a> ;em>|</em> <a href= "#" > Application range </a> <em>|</em> <a href= "#" &G t; technical architecture </a> </dd> </dl> </div>

Then use the URL in the browser address bar and rel contrast, if the equality in the current <a> tag plus class, while removing other <a> tags of the class.<script type= "Text/javascript" >

 var urlstr = location.href;　　　　　　　　Gets the URL of the browser
 var urlstatus=false; Mark
//traverse the navigation div
 $ ("#menu a"). each (function () {
//Determine whether the Rel and URL addresses inside the navigation are equal
  if (urlstr + '/'). IndexOf ($ ( This). attr (' rel ')] > -1&&$ (This). attr (' rel ')!= ') {
   $ (this). addclass (' cur '); urlstatus = true;
  } else {
   $ (this). Removeclass (' cur ');
  }
 });
The current style remains
 if (!urlstatus) {$ ("#menu a"). EQ (0). addclass (' cur ');
</script>

This can also basically achieve the effect, but if there are categories under the navigation, such as the figure. This URL of the classification URL and navigation can not match, and then the news URL and the URL of the navigation can not match. So it's a bit of a drag. What about it?

So that's my idea.

Since the URL is not the same, then find the navigation--> classification--> The relationship between the news. Their correspondence is that there may be multiple classifications under one navigation, and there may be multiple pieces of news under one category. So in reverse, Each news or category corresponds to a navigation. Then a variable is defined in the corresponding classification and news pages. Then modify the navigation <div> <a> label rel Properties. This property is compared to the variable, and the current class is changed.

The above content is through two ways to introduce you to the implementation of the jquery navigation menu highlighting, I hope to help you.