解決用戶惡意刷新的二級(jí)高亮樣式菜單

2024-07-21 02:04:35

字體：大中小

供稿：網(wǎng)友

菜單高亮效果是每個(gè)網(wǎng)頁(yè)經(jīng)常采用的設(shè)計(jì)方式，它能有效地讓用戶知道自己當(dāng)前所在的欄目。這也是我經(jīng)常采用的方式，一般的網(wǎng)頁(yè)至少都有兩級(jí)菜單，第一個(gè)是頂部的總導(dǎo)航條菜單，另一個(gè)是左側(cè)的分類導(dǎo)航菜單。一般要求在一級(jí)菜單高亮下二級(jí)菜單也能記錄當(dāng)前狀態(tài)。

對(duì)于一個(gè)包含頂部菜單的頁(yè)頭區(qū)域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純css或js方式可以很容易地實(shí)現(xiàn)，但今天我要談的不是這種，今天說(shuō)的是一級(jí)菜單和二級(jí)菜單在每個(gè)頁(yè)面中都是動(dòng)態(tài)加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想記錄菜單的高亮狀態(tài)是一件比較困難的事情。

當(dāng)然，你可能會(huì)說(shuō)，用cookie可以記錄每個(gè)頁(yè)面加載時(shí)上次記錄的高亮狀態(tài)，是的，它確實(shí)可以記錄，但是這種方式在一些復(fù)雜的包含許多子頁(yè)面的應(yīng)用中，會(huì)給用戶造成許多困擾和麻煩。比如在cookie生存周期內(nèi)，重新打開這個(gè)項(xiàng)目時(shí)，此時(shí)cookie的生存周期還沒(méi)有完全結(jié)束，它還記錄著上次保存的狀態(tài)，而這時(shí)頁(yè)面地址已經(jīng)發(fā)生了變化，那么當(dāng)前高亮的菜單所指向的就不是用戶所希望看到的頁(yè)面。實(shí)踐證明，這個(gè)cookie的生存周期無(wú)論你設(shè)置多長(zhǎng)都不能完美解決用戶惡意刷新頁(yè)面的狀況。這確實(shí)是一件糟糕的事情！

那么有沒(méi)有一種較好的辦法來(lái)解決這種狀況呢？

答案是有的。我們知道要解決這個(gè)問(wèn)題，最理想的辦法是在每個(gè)頁(yè)面加載時(shí)，根據(jù)頁(yè)面的url地址顯式地設(shè)置當(dāng)前菜單的高亮樣式。這能完美地解決此類問(wèn)題，并且這種方式無(wú)論用戶如何惡意點(diǎn)擊刷新按鈕，高亮狀態(tài)依舊保持不變。知道了原理，要實(shí)現(xiàn)起來(lái)就容易多了。

結(jié)構(gòu)層

一級(jí)菜單結(jié)構(gòu)層：

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

與一級(jí)菜單不同的是，我們將二級(jí)菜單中的鏈接地址加入兩個(gè)參數(shù)值，pid參數(shù)指向的是頂部一級(jí)菜單的的序號(hào)，而sid則是菜單自己的順序號(hào)。我們將這兩個(gè)菜單的總?cè)萜鱱l都設(shè)置了兩個(gè)不同中的id，它們需要在js中調(diào)用，所以千萬(wàn)不能少。

樣式層

關(guān)于樣式，其實(shí)都沒(méi)有什么特別的地方，你可以隨心所意地設(shè)置成你想要的樣式，只是需要注意的地方是，我們需要單獨(dú)設(shè)置菜單高亮的三種狀態(tài)樣式，以供js動(dòng)態(tài)調(diào)用。

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

|||

行為層

因?yàn)橐谛袨閷又锌刂撇藛蔚娜N狀態(tài)，所以對(duì)于a鏈接標(biāo)簽，我們就不使用hover偽類來(lái)達(dá)到菜單的三種動(dòng)態(tài)行為了，我們可以用onmouseover、onmouseout和onclick來(lái)模仿偽類的三種行為，這樣好便于js的動(dòng)態(tài)調(diào)整。并且為了達(dá)到行為、樣式和結(jié)構(gòu)的三層分離，我們也不用在a標(biāo)簽的html中去加上動(dòng)態(tài)的行為控制代碼，這不是一種良好的制作習(xí)慣。因此我們需要在頁(yè)面的加載函數(shù)上做點(diǎn)文章，這就需要使用到onload函數(shù)，當(dāng)頁(yè)面一加載完后就動(dòng)態(tài)綁定a標(biāo)簽的三種行為狀態(tài)。

在頁(yè)面一加載完成后，我們首先獲取當(dāng)前的頁(yè)面url字符串，再根據(jù)這個(gè)字符串和一二級(jí)菜單中的a標(biāo)簽的href地址進(jìn)行對(duì)比，如果存在相同項(xiàng)，則高亮此菜單項(xiàng)的樣式。

詳細(xì)的注釋說(shuō)明我都在下面的函數(shù)中一一標(biāo)注出來(lái)，在此就不一一細(xì)述了。關(guān)鍵函數(shù)代碼如下：

    //根據(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");
    // 如果鏈接沒(méi)有參數(shù)，或者url鏈接中不存在我們要獲取的參數(shù)，則返回?cái)?shù)組中的序號(hào)
    if(location.href.indexof("?")==-1){
    strurl=location.href.substring(location.href.lastindexof("/")+1);//取得url頁(yè)面名稱
        //一級(jí)菜單高亮
        for (var i = 0; i < navs.length; i++) {
            //在ie6,ie7中strhref獲得的是全路徑，而在ie8和ff中獲得的是頁(yè)面名稱，為了兼容，需要將它的字符串進(jìn)行拆分
            strhref=navs[i].getattribute("href").substring(navs[i].getattribute("href").lastindexof('/')+1);
            if(strurl==strhref){
                //高亮當(dāng)前菜單項(xiàng)
                addclass(navs[i],"cur");
            }
            else{//如果是其它項(xiàng)，則綁定鼠標(biāo)兩態(tài)事件
                (function(i){
                    var obj=navs[i];
                  addeventhandler(obj,"mouseover",function(){overme(obj)});
                    addeventhandler(obj,"mouseout",function(){outme(obj)});
                })(i)
            }
        }
        //二級(jí)菜單高亮
        if (document.getelementbyid(twomenuid) != null) {//判斷是否存在二級(jí)菜單
            //有可能二級(jí)菜單不存在，如首頁(yè)只有一級(jí)菜單，所以當(dāng)菜單id存在時(shí)，則...
            subnavs = document.getelementbyid("othermenu").getelementsbytagname('a');
            for (var n = 0; n < subnavs.length; n++) {
                hightlight(subnavs,n,0);//默認(rèn)高亮第一個(gè)菜單項(xiàng)
            }
        }
    }
    else{
        //如果url中帶有參數(shù)的頁(yè)面，則...
        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);//獲得第一個(gè)參數(shù)，這是一級(jí)菜單的id
        selfid=strselfid.substring(strselfid.indexof("=")+1);//獲得第二個(gè)參數(shù)，這是二級(jí)菜單的id

        //一級(jí)菜單高亮
        for (var i = 0; i < navs.length; i++) {
            hightlight(navs,i,parentid);
        }
        //二級(jí)菜單高亮
        if (document.getelementbyid(twomenuid) != null) {//判斷是否存在二級(jí)菜單
            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)移上去時(shí)的事件
            addeventhandler(obj, "mouseout", function(){outme(obj)});//增加鼠標(biāo)移走時(shí)的事件
        })(inumber)
    }
}