欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

JS如何利用cookie保存当前位置防刷新的导航效果

来源:本站整理 作者:佚名 时间:2015-11-06 TAG: 我要投稿

本文实例讲述了JS利用cookie记忆当前位置的防刷新导航效果。分享给大家供大家参考。具体如下:
这里演示利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼。这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能。
运行效果截图如下:

具体代码如下:
 xmlns="http://www.w3.org/1999/xhtml">
 http-equiv="Content-Type" content="text/html; charset=gb2312" />
cookie记忆-防刷新菜单
a{color:#5A73F3;text-decoration:none}
body{background:#333;margin:30px;font-size:14px;}
#menu li{float:left;height:25px;line-height:25px;list-style:none}
#menu li a{padding:10px;}
a:hover{background:#ccc;color:##3399FF}
a.hover{height:25px;line-height:25px;background:red;color:#ffffff}
a,area{blr:e-xpression(this.onFocus=this.blur())}
:focus{-moz-outline-style:none;}
 id="menu">
 
  href="javascript:void(0)" class="hover" onclick="changename(0)" hidefocus="true">我的菜单
  href="javascript:void(0)" onclick="changename(1)" hidefocus="true">网页模板
  href="javascript:void(0)" onclick="changename(2)" hidefocus="true">精品代码
  href="javascript:void(0)" onclick="changename(3)" hidefocus="true">设计素材
  href="javascript:clear();" hidefocus="true">恢复初始
 
 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;id.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;
}
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)
希望本文所述对大家的JavaScript程序设计有所帮助。
 

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载