两种防刷新的高亮导航菜单制作记录cookies和根据Url网址

来源：互联网发布：唱吧后期制作软件编辑：程序博客网时间：2024/06/10 18:04

1、根据URL使当前菜单高亮

首先,你得了解window.location的取值

window.location
属性描述
hash 设置或获取 href 属性中在井号“#”后面的分段。
host 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname 设置或获取 location 或 URL 的主机名称部分。
href 设置或获取整个 URL 为字符串。
pathname 设置或获取对象指定的文件名或路径。
port 设置或获取与 URL 关联的端口号码。
protocol 设置或获取 URL 的协议部分。
search 设置或获取 href 属性中跟在问号后面的部分。

如window.location.href 设置或获取整个 URL 为字符串。

然后没啥好讲的了,直接上例子吧

例子:

<a href="index.php" id="home">HOME</a> <a href="contact.php" id="contact">CONTACT</a> <a href="about.php" id="about">ABOUT</a> <a href="services.php" id="services">SERVICES</a>

原理就是获取当前的url地址里,如果包括有和菜单相同的字符,则给该菜单赋予一个style="color:red"

2、两种简单实现菜单高亮显示的JS类

近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类.

其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式.

第一种判断当前URL值高亮类代码:

//@Mr.Think---判断URL实现菜单高亮显示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0; i<links.length; i++ ){
   var menuLink=links[i].href;
   var currentLink=window.location.href;
   if(currentLink.indexOf(menuLink)!=-1){
   links[i].className=classCur;
   }
   }
}

参数说明:

1.menuId : 链接组所在ID;
2.classCur : 高亮显示时的样式class名.

调用方法:

window.onload=function highThis(){highURL("youId","youhighclass");}

第二种点击后高亮显示当前类:

//@Mr.Think---点击实现高亮显示
function highOnclick(elemId,classCur) {
   if (!document.getElementsByTagName) return false;
   if (!document.getElementById) return false;
   if (!document.getElementById(elemId)) return false;
   var elemId = document.getElementById(elemId);
   var links = elemId.getElementsByTagName("a");
   for (i = 0; i < links.length; i++) {
   links[i].onclick = function() {
   for (n = 0; n < links.length; n++) {
   links[n].className = "";
   this.className = classCur;
   this.blur();
   }
   }
   }
}

参数说明:

1.elemId : 链接组所在ID;
2.classCur : 点击后显示的样式class名.

调用方法:

window.onload=function highThis(){highOnclick("youId","youhighclass");}

此方法扩展性较强,比如可以通过判断parentNode.nodeName值来使某一类型链接不被遍历,等等.

3、不用Cookie的仿刷新二级高亮菜单

菜单高亮效果是每个网页经常采用的设计方式，它能有效地让用户知道自己当前所在的栏目。这也是我经常采用的方式，一般的网页至少都有两级菜单，第一个是顶部的总导航条菜单，另一个是左侧的分类导航菜单。一般要求在一级菜单高亮下二级菜单也能记录当前状态。

对于一个包含顶部菜单的页头区域如果固定不变的，也就是它不用每次都重新加载，这种情况下用纯CSS或JS方式可以很容易地实现，但今天我要谈的不是这种，今天说的是一级菜单和二级菜单在每个页面中都是动态加载的，也就是它们是作为用户控件的方式载入的。这种情况下要想记录菜单的高亮状态是一件比较困难的事情。

当然，你可能会说，用cookie可以记录每个页面加载时上次记录的高亮状态，是的，它确实可以记录，但是这种方式在一些复杂的包含许多子页面的应用中，会给用户造成许多困扰和麻烦。比如在cookie生存周期内，重新打开这个项目时，此时cookie的生存周期还没有完全结束，它还记录着上次保存的状态，而这时页面地址已经发生了变化，那么当前高亮的菜单所指向的就不是用户所希望看到的页面。实践证明，这个cookie的生存周期无论你设置多长都不能完美解决用户恶意刷新页面的状况。这确实是一件糟糕的事情！

那么有没有一种较好的办法来解决这种状况呢？

答案是有的。我们知道要解决这个问题，最理想的办法是在每个页面加载时，根据页面的url地址显式地设置当前菜单的高亮样式。这能完美地解决此类问题，并且这种方式无论用户如何恶意点击刷新按钮，高亮状态依旧保持不变。知道了原理，要实现起来就容易多了。

【结构层】

一级菜单结构层：

可以看到在这个一级菜单中，其链接地址一般是没有参数值的。二级菜单的结构层：

与一级菜单不同的是，我们将二级菜单中的链接地址加入两个参数值，pId参数指向的是顶部一级菜单的的序号，而sId则是菜单自己的顺序号。我们将这两个菜单的总容器ul都设置了两个不同中的ID，它们需要在JS中调用，所以千万不能少。

【样式层】

关于样式，其实都没有什么特别的地方，你可以随心所意地设置成你想要的样式，只是需要注意的地方是，我们需要单独设置菜单高亮的三种状态样式，以供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)
     }
     }

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

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

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

因为子页面较多，请下载本案例打包文件到本地测试：二级高亮菜单函数.rar

4、记录cookies 的高亮导航菜单

<div id="menu" class="leftmenu">
          <a href="about.html" class="hover" onclick="changename(0)" hidefocus="true">公司简介</a>
            <a href="javascript:void(0)" onclick="changename(1)" hidefocus="true">企业文化</a>
            <a href="javascript:void(0)" onclick="changename(2)" hidefocus="true">代理加盟</a>
            <a href="javascript:void(0)" onclick="changename(3)" hidefocus="true">人才招聘</a>
            <a href="javascript:void(0)" onclick="changename(4)" hidefocus="true">联系我们</a>
            <a href="javascript:void(0)" onclick="changename(5)" hidefocus="true">留言反馈</a>
            <a href="javascript:void(0)" onclick="changename(6)" hidefocus="true">友情链接</a>
          </div>
          <script language="javascript">
function changename(c,cl)
{
var d=document.getElementById("menu").getElementsByTagName("a");
if(!cl)
{
   writeCookie("hovers",c,222);
}
c=readCookie("hovers")?readCookie("hovers"):c;
for(i=0;i<d.length;i++)
{
   d[i].className=i==c?"hover":"";
}
}
function writeCookie(name, value, hours)
{
var expire = "";
if(hours != null)
{
    expire = new Date((new Date()).getTime() + hours * 3600000);
    expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}
// Example:
// alert( readCookie("myCookie") );
function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
    offset = document.cookie.indexOf(search);
    if (offset != -1)
    {
      offset += search.length;
      end = document.cookie.indexOf(";", offset);
      if (end == -1) end = document.cookie.length;
      cookieValue = unescape(document.cookie.substring(offset, end))
    }
}
return cookieValue;
}
function clear()
{
writeCookie("hovers","",222);
document.location=document.location.href;
}
changename(0,1)
</script>

一些地址记录

http://hi.baidu.com/yeziyy/blog/item/5c72a74b4785b9f982025cb5.html

http://www3.dongfeng.net/teach/teachdetail.asp?/228.html

学习整理http://mrthink.net/javascript-highlight-menu-twoway/

http://bbs.blueidea.com/viewthread.php?tid=2969523

两种防刷新的高亮导航菜单制作 记录cookies和根据Url网址

两种防刷新的高亮导航菜单制作记录cookies和根据Url网址