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

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.