不用Cookie實現高亮Javascript菜單效果

筆者經常採用的高亮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菜單效果的實現到此結束。