JavaScript Website Design Practice (2) Highlight menu items on the selected page in the navigation bar

I. Where the code in (1) can be modified. In (1), if you are running on a server, such as apache, you can extract the head and navigation div and place it in another html file. Then, on the page, include. In this way, you can modify the code in the navigation bar... SyntaxHighlighter. all (1 and (1. In (1), if you are running on a server, such as apache, you can extract the head and navigation div and place it in another html file. Then, on the page, include. In this way, to modify the navigation bar, you only need to modify one file instead of all the related page files. However, I did not do this here and did not extract it. 2. The current page ID + the head header background image of different pages are now highlighted based on the implementation of (1, let visitors know "I Am Here" all the way ". First, modify the color.css file and add a class = "here" attribute to the menu item. That is to say, here is an attribute dynamically added using javascript. Now, set the here style declaration in the color.css that controls the colors. Append this code: copy the Code # navigation. here: link, # navigation. here: visited, # navigation. here: hover, # navigation. here: active {color: # eef; background-color: #799;} copy the code. You can try it first, add a class = "here" attribute to one of the labels in the navigation bar. The menu item is highlighted. Create a global. js file to store the js files used by all pages. In the art of JavaScript DOM programming, we have written many functions available in the previous chapters. Now add these useful functions to the global. js file. Copy the code/***************** bind the function to the onload event function *********** * ************/function addLoadEvent (func) {// the func parameter indicates the function var oldonload = window to be executed after page loading is complete. onload; // set the existing window. the value of the onload event handler function is stored in the variable oldonload if (typeof window. onload! = 'Function') {// judge if the onload handler is not bound to any function, add a new function. Otherwise, append the new function window. onload = func;} else {window. onload = function () {// here the anonymous function is used to package two functions oldonload (); func ();}}} /****************** a function corresponding to the insertBefore method in JavaScript *********** * ******/function insertAfter (newElement, targetElement) {var parent = targetElement. parentNode; if (parent. lastChild = targetElement) {parent. appendChild (newElement);} else {paren T. insertBefore (newElement, targetElement. nextElementSibling );}} *************** * ************/function addClass (element, value) {// call this function, that is, create a class = "here" for example, and add such an attribute if (! Element. className) {element. className = value;} else {newClassName = element. className; newClassName + = ""; newClassName + = value; element. className = newClassName ;}} copy the code to add the highlighted function copy code/******************* click the menu ****** in the highlighted navigation bar ******* * ******************/function highlightPage () {// determine if (! Document. getElementById) return false; if (! Document. getElementsByName) return false; if (! Document. getElementById ("navigation") return false; // obtain var nav = document. getElementById ("navigation"); var links = document. getElementsByTagName ("a"); // logical operation for (var I = 0; I Html "> HomeThe value of the last subnode obtained is "Home", which is converted to lower case and finally set to the body element. The two lines of code can set a unique id attribute value for the body element. At this time, the body of the home page has an id = "home", and we also have a div with id = "header", combined with these two IDs, you can set different background images for different pages. 3rd, add the background image setting for each page header in webdesign.css. Copy the Code # about # header {background-image: url (.. /images/basshead.jpg);} # photos # header {background-image: url (.. /images/bassist.jpg);} # live # header {background-image: url (.. /images/drummer.jpg);} # contact # header {background-image: url (.. /images/lineup.jpg);} copy the code 42.16to see the effect. First, we will write a page of about.html to see if the context image of the menu item and header in the navigation bar has changed the about.html copy code. WebDesign