不用Cookie的仿刷新二級高亮菜單

發(fā)布時間：2009-07-29 17:18:52 作者：佚名

菜單高亮效果是每個網(wǎng)頁經(jīng)常采用的設(shè)計方式，它能有效地讓用戶知道自己當(dāng)前所在的欄目。

這也是我經(jīng)常采用的方式，一般的網(wǎng)頁至少都有兩級菜單，第一個是頂部的總導(dǎo)航條菜單，另一個是左側(cè)的分類導(dǎo)航菜單。一般要求在一級菜單高亮下二級菜單也能記錄當(dāng)前狀態(tài)。
對于一個包含頂部菜單的頁頭區(qū)域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實現(xiàn)，但今天我要談的不是這種，今天說的是一級菜單和二級菜單在每個頁面中都是動態(tài)加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想記錄菜單的高亮狀態(tài)是一件比較困難的事情。
當(dāng)然，你可能會說，用cookie可以記錄每個頁面加載時上次記錄的高亮狀態(tài)，是的，它確實可以記錄，但是這種方式在一些復(fù)雜的包含許多子頁面的應(yīng)用中，會給用戶造成許多困擾和麻煩。比如在cookie生存周期內(nèi)，重新打開這個項目時，此時cookie的生存周期還沒有完全結(jié)束，它還記錄著上次保存的狀態(tài)，而這時頁面地址已經(jīng)發(fā)生了變化，那么當(dāng)前高亮的菜單所指向的就不是用戶所希望看到的頁面。實踐證明，這個cookie的生存周期無論你設(shè)置多長都不能完美解決用戶惡意刷新頁面的狀況。這確實是一件糟糕的事情！
那么有沒有一種較好的辦法來解決這種狀況呢？
答案是有的。我們知道要解決這個問題，最理想的辦法是在每個頁面加載時，根據(jù)頁面的url地址顯式地設(shè)置當(dāng)前菜單的高亮樣式。這能完美地解決此類問題，并且這種方式無論用戶如何惡意點擊刷新按鈕，高亮狀態(tài)依舊保持不變。知道了原理，要實現(xiàn)起來就容易多了。
結(jié)構(gòu)層
一級菜單結(jié)構(gòu)層：

復(fù)制代碼

代碼如下:

可以看到在這個一級菜單中，其鏈接地址一般是沒有參數(shù)值的。二級菜單的結(jié)構(gòu)層：

復(fù)制代碼

代碼如下:

與一級菜單不同的是，我們將二級菜單中的鏈接地址加入兩個參數(shù)值，pId參數(shù)指向的是頂部一級菜單的的序號，而sId則是菜單自己的順序號。我們將這兩個菜單的總?cè)萜鱱l都設(shè)置了兩個不同中的ID，它們需要在JS中調(diào)用，所以千萬不能少。
樣式層
關(guān)于樣式，其實都沒有什么特別的地方，你可以隨心所意地設(shè)置成你想要的樣式，只是需要注意的地方是，我們需要單獨設(shè)置菜單高亮的三種狀態(tài)樣式，以供JS動態(tài)調(diào)用。

復(fù)制代碼

代碼如下:

/*一級菜單的三種樣式設(shè)置*/
#menu li a.normal{background:#fff;}//普通樣式
#menu li a.over{background:#00ff00;} //翻滾樣式
#menu li a.cur{background:#ff0000;color:#fff;} //高亮樣式
/*二級菜單的三種樣式設(shè)置*/
#othermenu li a.normal{background:#fff;} //普通樣式
#othermenu li a.over{background:#AA7F00;color:#fff;} //翻滾樣式
#othermenu li a.cur{background:#7F0000;color:#fff;} //高亮樣式

行為層
因為要在行為層中控制菜單的三種狀態(tài)，所以對于A鏈接標(biāo)簽，我們就不使用hover偽類來達到菜單的三種動態(tài)行為了，我們可以用onmouseover、onmouseout和onclick來模仿偽類的三種行為，這樣好便于js的動態(tài)調(diào)整。并且為了達到行為、樣式和結(jié)構(gòu)的三層分離，我們也不用在A標(biāo)簽的html中去加上動態(tài)的行為控制代碼，這不是一種良好的制作習(xí)慣。因此我們需要在頁面的加載函數(shù)上做點文章，這就需要使用到onload函數(shù)，當(dāng)頁面一加載完后就動態(tài)綁定a標(biāo)簽的三種行為狀態(tài)。
在頁面一加載完成后，我們首先獲取當(dāng)前的頁面url字符串，再根據(jù)這個字符串和一二級菜單中的A標(biāo)簽的href地址進行對比，如果存在相同項，則高亮此菜單項的樣式。
詳細的注釋說明我都在下面的函數(shù)中一一標(biāo)注出來，在此就不一一細述了。關(guān)鍵函數(shù)代碼如下：

復(fù)制代碼

代碼如下:

//根據(jù)URL地址的參數(shù)或字符串高亮當(dāng)前菜單。
function hightLightMenu(firstMenuID,twoMenuID){
var strUrl,strHref,subNavs,strLast,strParentID,strSelfID,
parentID,selfID,strID;
var Navs=document.getElementById(firstMenuID).getElementsByTagName("a");
// 如果鏈接沒有參數(shù)，或者URL鏈接中不存在我們要獲取的參數(shù)，則返回數(shù)組中的序號
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){
//高亮當(dāng)前菜單項
addClass(Navs[i],"cur");
}
else{//如果是其它項，則綁定鼠標(biāo)兩態(tài)事件
(function(i){
var obj=Navs[i];
addEventHandler(obj,"mouseover",function(){overMe(obj)});
addEventHandler(obj,"mouseout",function(){outme(obj)});
})(i)
}
}
//二級菜單高亮
if (document.getElementById(twoMenuID) != null) {//判斷是否存在二級菜單
//有可能二級菜單不存在，如首頁只有一級菜單，所以當(dāng)菜單id存在時，則...
subNavs = document.getElementById("othermenu").getElementsByTagName('a');
for (var n = 0; n < subNavs.length; n++) {
hightlight(subNavs,n,0);//默認高亮第一個菜單項
}
}
}
else{
//如果url中帶有參數(shù)的頁面，則...
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);//獲得第一個參數(shù)，這是一級菜單的id
selfID=strSelfID.substring(strSelfID.indexOf("=")+1);//獲得第二個參數(shù)，這是二級菜單的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);
}
}
}
}
//高亮函數(shù)
function hightlight(elementArray,inumber,curMenuIndex){
if (inumber == curMenuIndex) {
addClass(elementArray[inumber],"cur");//高亮當(dāng)前菜單樣式
}
else {
(function(inumber){
var obj = elementArray[inumber];
addEventHandler(obj, "mouseover", function(){overMe(obj)});//增加鼠標(biāo)移上去時的事件
addEventHandler(obj, "mouseout", function(){outme(obj)});//增加鼠標(biāo)移走時的事件
})(inumber)
}
}

經(jīng)過如上一番設(shè)置，一個通用、兼容的高亮函數(shù)就誕生了，我們看看它的效果截圖：