美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

JavaSpcrit高亮显示防刷新导航菜单的方法

JavaScript mihoweb 2216℃ 0评论

今天朋友在看到一个导航效果问我怎么做的,起初觉得是css的a.cur写的,但是自己在测试过后发现ie5.5、6、7、8都不支持这种写法,于是纠结了,想到了JavaSpcrit,思想着应该是用js控制每一个a标签都在点击后保持hover的样式,最后在网上找见了这种写法,应该有很多种js的写法,今天就来说说这种JavaSpcrit防止刷新的高亮导航写法;

上面的效果相信大家在很多的网站上都见到过,尤其是侧边的导航中很常见的。到底是怎么做的呢?废话不多说,上代码:

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2.  <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3.  <head>  
  4.  <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />  
  5.  <title>cookie记忆-防刷新菜单www.mihoweb.com</title>  
  6.  <style>  
  7.  a{color:#5A73F3;text-decoration:none}   
  8.  body{background:#333;margin:30px;font-size:14px;}   
  9.  #menu li{float:left;height:25px;line-height:25px;list-style:none}   
  10.  #menu li a{padding:10px;}   
  11.  a:hover{background:#ccc;color:##3399FF}   
  12.  a.hover{height:25px;line-height:25px;background:red;color:#ffffff}   
  13.  a,area{blr:e-xpression(thisthis.onFocus=this.blur())}   
  14.  :focus{-moz-outline-style:none;}    
  15. </style>  
  16.     
  17. </head>  
  18.  <body>  
  19.  <div id=“menu”>  
  20.      <ul>  
  21.      <li><a href=“javascript:void(0)” class=“hover” onclick=“changename(0)” hidefocus=“true”>美浩工作室</a></li>  
  22.      <li><a href=“http://www.mihoweb.com” onclick=“changename(1)” hidefocus=“true”>点我测试</a></li>  
  23.      <li><a href=“javascript:void(0)” onclick=“changename(2)” hidefocus=“true”>试试看看</a></li>  
  24.      <li><a href=“javascript:void(0)” onclick=“changename(3)” hidefocus=“true”>防止刷新</a></li>  
  25.      </ul>  
  26.  </div>  
  27.  <script language=“javascript”>  
  28.  function changename(c,cl)   
  29.  {   
  30.      var d=document.getElementById(“menu”).getElementsByTagName(“a”);   
  31.      if(!cl)   
  32.      {   
  33.          writeCookie(“hovers”,c,222);   
  34.      }   
  35.      c=readCookie(“hovers”)?readCookie(“hovers”):c;   
  36.      for(i=0;i<d.length;i++)   
  37.      {   
  38.          d[i].className=i==c?”hover”:”";   
  39.      }   
  40.  }   
  41.  function writeCookie(name, value, hours)   
  42.  {   
  43.    var expire = “”;   
  44.    if(hours != null)   
  45.    {   
  46.      expire = new Date((new Date()).getTime() + hours * 3600000);   
  47.      expire = “; expires=” + expire.toGMTString();   
  48.    }   
  49.    document.cookie = name + ”=” + escape(value) + expire;   
  50.  }   
  51.  // Example:   
  52.  // alert( readCookie(“myCookie”) );   
  53.  function readCookie(name)   
  54.  {   
  55.    var cookieValue = “”;   
  56.    var search = name + ”=”;   
  57.    if(document.cookie.length > 0)   
  58.    {    
  59.     offset = document.cookie.indexOf(search);   
  60.      if (offset != -1)   
  61.      {    
  62.       offset += search.length;   
  63.        end = document.cookie.indexOf(“;”, offset);   
  64.        if (end == -1) end = document.cookie.length;   
  65.        cookieValue = unescape(document.cookie.substring(offset, end))   
  66.      }   
  67.    }   
  68.    return cookieValue;   
  69.  }   
  70.  function clear()   
  71.  {   
  72.      writeCookie(“hovers”,”",222);   
  73.      documentdocument.location=document.location.href;   
  74.  }   
  75.  changename(0,1)   
  76.  </script>  
  77.  </body>  
  78.  </html>  
  79.    

以上代码很简短,但是效果很强悍,可以防止网页因刷新出现的点击的某个背景效果消失,因为这个是利用cookie记忆的哦!

注释:css中的blr:e-xpression(thisthis.onFocus=this.blur())是去除链接区的虚线框,大家如果想要这种效果,可以直接复制运行修改就可以了。哦,对了,那个javascript:void(0)可以替代为其他的链接地址哦,只是在写的过程中的习惯,如果用#的话,如果页面长的话,点击后就返回本页的顶部了,用javascript:void(0)就不会的,相信对js有了解的,都应该知道!

如果您喜欢这篇文章,欢迎分享订阅。

转载请注明:美浩工作室官方博客 » JavaSpcrit高亮显示防刷新导航菜单的方法

喜欢 (6)