中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

行為層

因為要在行為層中控制菜單的三種狀態(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ù)代碼如下：

    //根據(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ù)就誕生了，我們看看它的效果截圖：

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

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

因為子頁面較多，請下載本案例打包文件到本地測試：下載Demo

原文：http://www.cnblogs.com/binyong/archive/2009/07/27/1531441.html

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2941335-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2009/6915.asp　

出處：藍色理想
責(zé)任編輯：bluehearts

上一頁 不用Cookie的仿刷新二級高亮菜單 [1] 下一頁

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。