一、（一）中的代碼還可以修改的地方。
在（一）中，如果是運行在服務器下，如apache等，可以把head和navigation的div抽取出來，放置在另一個html文件里，然后在頁面中，include進來。這樣，當要對導航欄進行修改時，只需要修改一個文件，而不用修改所有相關的頁面文件。不過，我這里沒有這樣做，沒有抽取出來。
二、實現當前頁面的標識+不同頁面的head頭部背景圖片的改變
現在在（一）實現的基礎之上，來實現導航欄當前所選頁面的菜單項高亮顯示，讓訪問者一路了然知道“我正在這里”。
首先，修改color.css文件，給菜單項增加一個class="here"屬性，也就是說等一下這個here是使用javascript動態增加的一個屬性。現在先在控制顏色的color.css中設置here的樣式聲明。追加這個代碼：
#navigation a.here:link, #navigation a.here:visited, #navigation a.here:hover, #navigation a.here:active{ color:#eef; background-color: #799; }
此時，你或者可以先嘗試一下，給導航欄中的其中一個<a>標簽添加一個class="here"的屬性，可以看到該菜單項高亮顯示。
然后，來創建一個global.js，存放所有頁面會用到的js。
在《JavaScript DOM編程藝術》里面，前面幾章給我們寫了很多個可以使用的函數。現在把這幾個有用的函數添加到global.js的文件里面來。
/******************綁定函數到onload事件上的函數*************************/ function addLoadEvent(func){ //參數func為頁面加載完成要執行的函數 var oldonload = window.onload; //把現有的window.onload事件處理函數的值存入變量oldonload中 if(typeof window.onload != 'function'){ //判斷 如果onload處理函數沒綁定任何函數，則添加新函數；否則，追加新函數 window.onload = func; }else{ window.onload = function(){ //這里使用了匿名函數包納兩個函數 oldonload(); func(); } } } /*******************跟JavaScript中的insertBefore方法對應的一個函數*******************/ function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextElementSibling); } } /******************動態添加class屬性的函數*****************************/ function addClass(element,value){ //調用該函數，就是創建一個例如：class="here"，給標簽增加了增加了這么一個屬性 if(!element.className){ element.className = value; }else{ newClassName = element.className; newClassName +=" "; newClassName += value; element.className = newClassName; } }
添加高亮顯示的函數
/*****************高亮顯示導航欄當前點擊菜單***************************/ function highlightPage(){ //判斷 if(!document.getElementById) return false; if(!document.getElementsByName) return false; if(!document.getElementById("navigation")) return false; //獲取 var nav = document.getElementById("navigation"); var links = document.getElementsByTagName("a"); //邏輯操作 for(var i =0; i<links.length; i++){ var linkurl = links[i].getAttribute("href"); //獲取具有href的屬性值 var currenturl = document.location.href; //獲取當前的href屬性值 if(currenturl.indexOf(linkurl) != -1){ links[i].className = "here"; var linktext = links[i].lastChild.nodeValue.toLowerCase(); //把提取出來的文本轉換為小寫 document.body.setAttribute("id",linktext); } } } addLoadEvent(highlightPage); //最后調用該函數
（1） if(currenturl.indexOf(linkurl) != -1)
indexOf（）方法，可以在一個字符串中找一個子串的位置，，沒有找到，返回-1，找到返回所在的位置。
（2）
var linktext = links[i].lastChild.nodeValue.toLowerCase(); //把提取出來的文本轉換為小寫
document.body.setAttribute("id",linktext);
獲取到當前鏈接的最后一個子節點的值——也就是說當前鏈接的標識文本。
當前鏈接的是如此這般的：<li><a href="webDesign.html">Home</a></li>，那么獲取到的最后一個子節點的值就是”Home“，此時再轉換為小寫，最后設置到body元素里。
這兩行代碼可以給body元素分別設置一個唯一的id屬性值。如圖：
此時主頁的body是有一個id=”home“，另外我們還有一個id="header"的div，結合這兩個id，就可以給不同的頁面設置不同的背景圖片
3、在webdesign.css添加設置每個頁面的header的背景圖片
#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); }
4、為了看到效果，我們先寫出一個about.html的頁面，來看看導航欄菜單項和header的背景圖片是否改變了
about.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>webDesign</title> <link rel="stylesheet" href="style/webdesign.css" /> <link rel="stylesheet" href="style/color.css" /> <link rel="stylesheet" href="style/typography.css" /> <script type="text/javascript" src="js/global.js" ></script> </head> <body> <div id="header"> <img src="images/weblogo.gif" /> </div> <div id="navigation"> <ul> <li><a href="webDesign.html">Home</a></li> <li><a href="about.html">about</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--header部分結束--> <div id="content"> <h1>About the band</h1> <ul id="internalnav"> <li><a href="#jay">Jay Skript</a></li> <li><a href="#domsters">The Domsters</a></li> </ul> <div class="section" id="jay"> <h2> Jay Skipt</h2> <p>Jay Skript is going to rock your world</p> <p>Jay Skript is going to rock your world</p> <p>Jay Skript is going to rock your world</p> <p>Jay Skript is going to rock your world</p> <p>Jay Skript is going to rock your world</p> </div> <div class="section" id="domsters"> <h2> The Domsters</h2> <p>The Domsters have been around,in one form or another,for almost as long.It's only in the past few years taht The Domsters.</p> </div> </div> </body> </html>
效果截圖：兩個效果都實現了
