JavaScript網站設計實踐（二）實作導航欄目前所選頁面的菜單項高亮顯示

一、（一）中的代碼還可以修改的地方。

在（一）中，如果是運作在伺服器下，如apache等，可以把head和navigation的div抽取出來，放置在另一個html檔案裡，然後在頁面中，include進來。這樣，當要對導航欄進行修改時，隻需要修改一個檔案，而不用修改所有相關的頁面檔案。不過，我這裡沒有這樣做，沒有抽取出來。

二、實作目前頁面的辨別+不同頁面的head頭部背景圖檔的改變

現在在（一）實作的基礎之上，來實作導航欄目前所選頁面的菜單項高亮顯示，讓通路者一路了然知道“我正在這裡”。

首先，修改color.css檔案，給菜單項增加一個class="here"屬性，也就是說等一下這個here是使用javascript動态增加的一個屬性。現在先在控制顔色的color.css中設定here的樣式聲明。追加這個代碼：

此時，你或者可以先嘗試一下，給導航欄中的其中一個<a>标簽添加一個class="here"的屬性，可以看到該菜單項高亮顯示。

然後，來建立一個global.js，存放所有頁面會用到的js。

在《JavaScript DOM程式設計藝術》裡面，前面幾章給我們寫了很多個可以使用的函數。現在把這幾個有用的函數添加到global.js的檔案裡面來。

 添加高亮顯示的函數