筆者經常采用的高亮Javascript菜單效果設計方式，一般的網頁至少都有兩級菜單，***個是頂部的總導航條菜單，另一個是左側的分類導航菜單。一般要求在一級菜單高亮下二級菜單也能記錄當前狀態。

對于一個包含頂部菜單的頁頭區域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實現，但今天我要談的不是這種，今天說的是一級菜單和二級菜單在每個頁面中都是動態加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想高亮Javascript菜單效果的狀態是一件比較困難的事情。

當然，你可能會說，用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> 

可以看到在這個一級菜單中，其鏈接地址一般是沒有參數值的。 二級菜單的結構層：

/*一級菜單的三種樣式設置*/ 
#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;} //高亮樣式 

與一級菜單不同的是，我們將二級菜單中的鏈接地址加入兩個參數值，pId參數指向的是頂部一級菜單的的序號，而sId則是菜單自己的順序號。我們將這兩個菜單的總容器ul都設置了兩個不同中的ID，它們需要在JS中調用，所以千萬不能少。

【樣式層】

關于樣式，其實都沒有什么特別的地方，你可以隨心所意地設置成你想要的樣式，只是需要注意的地方是，我們需要單獨設置高亮Javascript菜單效果的三種狀態樣式，以供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;} //高亮樣式 

【行為層】

因為要在行為層中控制菜單的三種狀態，所以對于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)  
    }     
} 

經過如上一番設置，一個通用、兼容的高亮函數就誕生了，我們看看高亮Javascript菜單效果截圖：

本案例的高亮函數在如下瀏覽器中測試通過：

IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera

高亮Javascript菜單效果的實現到此結束。

【編輯推薦】

1. JavaScript類和繼承：prototype屬性
2. JavaScript類和繼承：this屬性
3. ExtJS Grid Tooltip的3+1種實現方式總結
4. JavaScript異步調用框架的鏈式實現
5. JavaScript異步調用框架的jQuery風格鏈式調用