Two simple JS codes to implement menu highlighting_javascript skills-JS Tutorial-php.cn

Two simple JS codes to implement menu highlighting_javascript skills

WBOY

Release： 2016-05-16 18:24:30

Original

1199 people have browsed it

I remember that when I was writing static pages, I would add different styles to each page to achieve highlighting. I think highlighting is a commonly used effect for web front-ends, and it happens to be used again this time. I specially sorted out the two highlighting classes I wrote.

In fact, the idea is very simple. The first method is to traverse the href value of the link group and use indexOf to determine whether the href value is included in the current URL of the browser. Value. This method has certain limitations. For example, the menu within an iframe cannot be judged in this way; the second method has a wider scope of application, and the implementation idea is relatively simple, that is, by judging the click, the clicked item is loaded with a highlight style.

The first type of code to highlight the current URL value:

Copy the code The code is as follows:

 
//@Mr.Think---Determine the URL to implement 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; ivar menuLink=links[i].href; 
var currentLink=window.location.href; 
 if(currentLink.indexOf(menuLink)!=-1){ 
links[i].className=classCur; 
} 
} 
} 

Parameter description:

1.menuId: ID of the link group;
2.classCur: Style class name when highlighted.
Calling method:

window.onload=function highThis( ){highURL("youId","youhighclass");}
The second type of click highlights the current class:

Copy code The code is as follows:

 
//@Mr.Think---Click to realize 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: ID of the link group;
2.classCur: Style class displayed after clicking Name.
Calling method:

window.onload=function highThis(){highOnclick("youId","youhighclass");}
This method is highly scalable, for example, you can judge the parentNode .nodeName value to prevent a certain type of link from being traversed, etc.
Source code download and demonstration
Since some friends don’t know how to use it, I specially sorted out the pages related to this class that I wrote before. Give a DEMO page and download address, friends who need it can view or download it.

Package download address