網頁制作poluoluo文章簡介：我們知道要解決這個問題，最理想的辦法是在每個頁面加載時，根據頁面的url地址顯式地設置當前菜單的高亮樣式。這能完美地解決此類問題，並且這種方式無論用戶如何惡意點擊刷新按鈕，高亮狀態依舊保持不變。 知道了原理，要實現起來就容易多了。
菜單高亮效果是每個網頁經常采用的設計方式，它能有效地讓用戶知道自己當前所在的欄目。這也是我經常采用的方式，一般的網頁至少都有兩級菜單，第一個是頂部的總導航條菜單，另一個是左側的分類導航菜單。一般要求在一級菜單高亮下二級菜單也能記錄當前狀態。
對於一個包含頂部菜單的頁頭區域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實現，但今天我要談的不是這種，今天說的是一級菜單和二級菜單在每個頁面中都是動態加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想記錄菜單的高亮狀態是一件比較困難的事情。
當然，你可能會說，用cookie可以記錄每個頁面加載時上次記錄的高亮狀態，是的，它確實可以記錄，但是這種方式在一些復雜的包含許多子頁面的應用中，會給用戶造成許多困擾和麻煩。比如在cookie生存周期內，重新打開這個項目時，此時cookie的生存周期還沒有完全結束，它還記錄著上次保存的狀態，而這時頁面地址已經發生了變化，那麼當前高亮的菜單所指向的就不是用戶所希望看到的頁面。實踐證明，這個cookie的生存周期無論你設置多長都不能完美解決用戶惡意刷新頁面的狀況。這確實是一件糟糕的事情！
那麼有沒有一種較好的辦法來解決這種狀況呢？
答案是有的。我們知道要解決這個問題，最理想的辦法是在每個頁面加載時，根據頁面的url地址顯式地設置當前菜單的高亮樣式。這能完美地解決此類問題，並且這種方式無論用戶如何惡意點擊刷新按鈕，高亮狀態依舊保持不變。 知道了原理，要實現起來就容易多了。
結構層
一級菜單結構層：
<ul id="menu">
<li><a href="default.html">首頁</a></li>
<li><a href="clothing.html">服裝用品</a></li>
<li><a href="house.html">家居用品</a></li>
<li><a href="cosmetic.html">化妝用品</a></li>
</ul>
可以看到在這個一級菜單中，其鏈接地址一般是沒有參數值的。 二級菜單的結構層：
<ul id="othermenu">
<li><a href="house.html?pId=2&sId=1">日常用品</a></li>
<li><a href="house.html?pId=2&sId=2">小型家具</a></li>
<li><a href="house.html?pId=2&sId=3">電器配件</a></li>
<li><a href="house.html?pId=2&sId=4">床品套件</a></li>
<li><a href="house.html?pId=2&sId=5">婚慶床品</a></li>
<li><a href="house.html?pId=2&sId=6">兒童床品</a></li>
<li><a href="house.html?pId=2&sId=7">工藝擺設</a></li>
<li><a href="house.html?pId=2&sId=8">清潔工具</a></li>
<li><a href="house.html?pId=2&sId=9">家居清潔</a></li>
</ul>
與一級菜單不同的是，我們將二級菜單中的鏈接地址加入兩個參數值，pId參數指向的是頂部一級菜單的的序號，而sId則是菜單自己的順序號。我們將這兩個菜單的總容器ul都設置了兩個不同中的ID，它們需要在JS中調用，所以千萬不能少。
樣式層
關於樣式，其實都沒有什麼特別的地方，你可以隨心所意地設置成你想要的樣式，只是需要注意的地方是，我們需要單獨設置菜單高亮的三種狀態樣式，以供JS動態調用。
/*一級菜單的三種樣式設置*/
#menu li a.normal{background:#fff;}//普通樣式
#menu li a.over{background:#00ff00;} //翻滾樣式
#menu li a.cur{background:#ff0000;color:#fff;} //高亮樣式
/*二級菜單的三種樣式設置*/
#othermenu li a.normal{background:#fff;} //普通樣式
#othermenu li a.over{background:#AA7F00;color:#fff;} //翻滾樣式
#othermenu li a.cur{background:#7F0000;color:#fff;} //高亮樣式
網頁制作poluoluo文章簡介：我們知道要解決這個問題，最理想的辦法是在每個頁面加載時，根據頁面的url地址顯式地設置當前菜單的高亮樣式。這能完美地解決此類問題，並且這種方式無論用戶如何惡意點擊刷新按鈕，高亮狀態依舊保持不變。 知道了原理，要實現起來就容易多了。
行為層
因為要在行為層中控制菜單的三種狀態，所以對於A鏈接標簽，我們就不使用hover偽類來達到菜單的三種動態行為了，我們可以用onmouseover、onmouseout和onclick來模仿偽類的三種行為，這樣好便於js的動態調整。並且為了達到行為、樣式和結構的三層分離，我們也不用在A標簽的html中去加上動態的行為控制代碼，這不是一種良好的制作習慣。因此我們需要在頁面的加載函數上做點文章，這就需要使用到onload函數，當頁面一加載完後就動態綁定a標簽的三種行為狀態。
在頁面一加載完成後，我們首先獲取當前的頁面url字符串，再根據這個字符串和一二級菜單中的A標簽的href地址進行對比，如果存在相同項，則高亮此菜單項的樣式。
詳細的注釋說明我都在下面的函數中一一標注出來，在此就不一一細述了。關鍵函數代碼如下：
//根據URL地址的參數或字符串高亮當前菜單。
function hightLightMenu(firstMenuID,twoMenuID){
var strUrl,strHref,subNavs,strLast,strParentID,strSelfID,
parentID,selfID,strID;
var Navs=document.getElementById(firstMenuID).getElementsByTagName("a");
// 如果鏈接沒有參數，或者URL鏈接中不存在我們要獲取的參數，則返回數組中的序號
if(location.href.indexOf("?")==-1){
strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//取得URL頁面名稱
//一級菜單高亮
for (var i = 0; i < Navs.length; i++) {
//在IE6,IE7中strHref獲得的是全路徑，而在IE8和ff中獲得的是頁面名稱，為了兼容，需要將它的字符串進行拆分
strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1);
if(strUrl==strHref){
//高亮當前菜單項
addClass(Navs[i],"cur");
}
else{//如果是其它項，則綁定鼠標兩態事件
(function(i){
var obj=Navs[i];
addEventHandler(obj,"mouseover",function(){overMe(obj)});
addEventHandler(obj,"mouseout",function(){outme(obj)});
})(i)
}
}
//二級菜單高亮
if (document.getElementById(twoMenuID) != null) {//判斷是否存在二級菜單
//有可能二級菜單不存在，如首頁只有一級菜單，所以當菜單id存在時，則...
subNavs = document.getElementById("othermenu").getElementsByTagName('a');
for (var n = 0; n < subNavs.length; n++) {
hightlight(subNavs,n,0);//默認高亮第一個菜單項
}
}
}
else{
//如果url中帶有參數的頁面，則...
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);//獲得第一個參數，這是一級菜單的id
selfID=strSelfID.substring(strSelfID.indexOf("=")+1);//獲得第二個參數，這是二級菜單的id
//一級菜單高亮
for (var i = 0; i < Navs.length; i++) {
hightlight(Navs,i,parentID);
}
//二級菜單高亮
if (document.getElementById(twoMenuID) != null) {//判斷是否存在二級菜單
subNavs = document.getElementById(twoMenuID).getElementsByTagName('a');
for (var n = 0; n < subNavs.length; n++) {
strID=selfID - 1;
hightlight(subNavs,n,strID);
}
}
}
}
//高亮函數
function hightlight(elementArray,inumber,curMenuIndex){
if (inumber == curMenuIndex) {
addClass(elementArray[inumber],"cur");//高亮當前菜單樣式
}
else {
(function(inumber){
var obj = elementArray[inumber];
addEventHandler(obj, "mouseover", function(){overMe(obj)});//增加鼠標移上去時的事件
addEventHandler(obj, "mouseout", function(){outme(obj)});//增加鼠標移走時的事件
})(inumber)
}
}
經過如上一番設置，一個通用、兼容的高亮函數就誕生了，我們看看它的效果截圖：
本案例的高亮函數在如下浏覽器中測試通過：
IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera
因為子頁面較多，請下載本案例打包文件到本地測試：下載Demo