Anti-refresh second-level highlight menu for javascript without Cookie

[Structural layer]

Level 1 menu structure layer:

<Ul id = "menu"> <Li> <a href = "default.html"> homepage </a> </li> <Li> <a href = "clothing.html"> apparel products </a> </li> <Li> <a href = "house.html"> household products </a> </li> <Li> <a href = "cosmetic.html"> cosmetics </a> </li> </Ul>

We can see that in this level-1 menu, the link address generally has no parameter value.

Level 2 menu structure:

<Ul id = "othermenu"> <Li> <a href = "house.html? Pid = 2 & sid = 1 "> Daily necessities </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 2 "> small furniture </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 3 "> electrical accessories </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 4 "> bedding kit </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 5 "> Wedding bedding </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 6 "> children's bedding </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 7 "> craft decoration </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 8 "> cleaning tool </a> </li> <Li> <a href = "house.html? Pid = 2 & sid = 9 "> household cleaning </a> </li> </Ul>

Different from the level-1 menu, we add two parameter values to the link address in the level-2 menu. The pid parameter points to the serial number of the level-1 menu on the top, and the sid is the sequence number of the menu.

We have set two different IDs for the total containers ul of these two menus. They need to be called in webpage special effects, so there must be no less.

[Style layer]

There is nothing special about the style. You can set it as you want, but note that, we need to separately set three state Styles highlighted in the menu for dynamic calling of webpage special effects:
 

/* Three style settings of the level-1 menu */ # Menu li a. normal {background: # fff;} // normal style # Menu li a. over {background: #00ff00;} // tumble style # Menu li a. cur {background: # ff0000; color: # fff;} // highlight style /* Three style settings for the level-2 menu */ # Othermenu li a. normal {background: # fff ;}// normal style # Othermenu li a. over {background: # aa7f00; color: # fff;} // tumble style # Othermenu li a. cur {background: #7f0000; color: # fff;} // highlight style

[Behavior layer]

Because three menu states need to be controlled in the action layer, we will not use the hover pseudo class for the link label to achieve the three dynamic actions of the menu, we can use the onmouseo tutorials ver, onmouseout, and onclick to simulate three pseudo-class behaviors, so as to facilitate dynamic adjustment of js. To achieve layer-3 Separation of behavior, style, and structure, we do not need to add dynamic behavior control code in the html of Tag a. This is not a good habit of making. Therefore, we need to make some articles on the page loading function, which requires the onload function. When the page is loaded, it dynamically binds the three Behavior states of the tag.

After Page 1 is loaded, we first obtain the current page url string, and then compare the string with the href address of the tag in the second-level menu. If the same item exists, the style of this menu item is highlighted.

The detailed annotations are all marked in the following functions. I will not detail them here. The key function code is as follows:

// Highlight the current menu based on url parameters or strings Function hightlightmenu (firstmenuid, twomenuid ){ Var strurl, strhref, subnavs, strlast, strparentid, strselfid, parentid, selfid, strid; Var navs = document. getelementbyid (firstmenuid). getelementsbytagname (""); // If the link has no parameters or the url link does not contain the parameters we want to obtain, the serial number in the array is returned. If (location. href. indexof ("? ") =-1 ){ Strurl = location. href. substring (location. href. lastindexof ("/") + 1); // Obtain the url page name // Highlight a level-1 Menu For (var I = 0; I <navs. length; I ++ ){ // In ie6 and ie7, strhref obtains the full path, while in ie8 and ff, it obtains the page name. To be compatible, you need to split its string. Strhref = navs [I]. getattribute ("href"). substring (navs [I]. getattribute ("href"). lastindexof ('/') + 1 ); If (strurl = strhref ){ // Highlight the current menu item Addclass (navs [I], "cur ");            } Else {// if it is another item, bind the mouse to a two-state event (Function (I ){ Var obj = navs [I]; Addeventhandler (obj, "mouseover", function () {overme (obj )}); Addeventhandler (obj, "mouseout", function () {outme (obj )}); }) (I)            }        } // Highlight the level-2 menu If (document. getelementbyid (twomenuid )! = Null) {// determine whether a level-2 menu exists // It is possible that the level-2 menu does not exist. For example, the homepage only has a level-1 menu, so when the menu id exists Subnavs = document. getelementbyid ("othermenu"). getelementsbytagname ('A '); For (var n = 0; n <subnavs. length; n ++ ){ Hightlight (subnavs, n, 0); // The first menu item is highlighted by default.            }        }     } Else { // If the url contains a page with parameters Strlast = location. href. substring (location. href. indexof ("? ") + 1 ); Strparentid = strlast. substring (0, strlast. indexof ("&")); Strselfid = strlast. substring (strlast. indexof ("&") + 1 ); Parentid = strparentid. substring (strparentid. indexof ("=") + 1); // obtain the first parameter, which is the id of the level-1 menu. Selfid = strselfid. substring (strselfid. indexof ("=") + 1); // Obtain the second parameter, which is the id of the level-2 menu. // Highlight a level-1 Menu For (var I = 0; I <navs. length; I ++ ){ Hightlight (navs, I, parentid );        } // Highlight the level-2 menu If (document. getelementbyid (twomenuid )! = Null) {// determine whether a level-2 menu exists Subnavs = document. getelementbyid (twomenuid). getelementsbytagname ('A '); For (var n = 0; n <subnavs. length; n ++ ){ Strid = selfid-1; Hightlight (subnavs, n, strid );            }        }     } } // Highlight function Function hightlight (elementarray, inumber, curmenuindex ){ If (inumber = curmenuindex ){ Addclass (elementarray [inumber], "cur"); // highlight the current menu style     } Else { (Function (inumber ){ Var obj = elementarray [inumber]; Addeventhandler (obj, "mouseover", function () {overme (obj)}); // adds an event when the mouse moves up. Addeventhandler (obj, "mouseout", function () {outme (obj)}); // adds an event when you move the mouse }) (Inumber)     } }

After the above settings, a general and compatible highlight function was born. Let's take a look at its effect screenshot: