行为层

因为要在行为层中控制菜单的三种状态，所以对于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)
    }    
    }

经过如上一番设置，一个通用、兼容的高亮函数就诞生了，我们看看它的效果截图：

本案例的高亮函数在如下浏览器中测试通过：

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

因为子页面较多，请下载本案例打包文件到本地测试：下载Demo

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

经典论坛交流：
http://bbs.blueidea.com/thread-2941335-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6915.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 不用Cookie的仿刷新二级高亮菜单 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。