当前位置: 首页 > 编程笔记 >

JS利用cookie记忆当前位置的防刷新导航效果

赵辉
2023-03-14
本文向大家介绍JS利用cookie记忆当前位置的防刷新导航效果,包括了JS利用cookie记忆当前位置的防刷新导航效果的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了JS利用cookie记忆当前位置的防刷新导航效果。分享给大家供大家参考。具体如下:

这里演示利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼。这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-cookie-nav-pos-menu-demo/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cookie记忆-防刷新菜单</title>
<style>
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;} 
</style>
</head>
<body>
<div id="menu">
  <ul>
  <li><a href="javascript:void(0)" class="hover" onclick="changename(0)" hidefocus="true">我的菜单</a></li>
  <li><a href="javascript:void(0)" onclick="changename(1)" hidefocus="true">网页模板</a></li>
  <li><a href="javascript:void(0)" onclick="changename(2)" hidefocus="true">精品代码</a></li>
  <li><a href="javascript:void(0)" onclick="changename(3)" hidefocus="true">设计素材</a></li>
  <li><a href="javascript:clear();" hidefocus="true">恢复初始</a></li>
  </ul>
</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;
}
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>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍js实现显示当前状态的导航效果代码,包括了js实现显示当前状态的导航效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现显示当前状态的导航效果代码。分享给大家供大家参考。具体如下: 这里演示显示当前状态的导航,鼠标点击左侧的导航菜单,右侧的内容就会变换,实际上是一个竖向的TAB选项卡,作为菜单来用的话,它正好可以显示当前的菜单位置,比较经典。 运行效果截图如下:

  • 本文向大家介绍利用Js+Css实现折纸动态导航效果实例源码,包括了利用Js+Css实现折纸动态导航效果实例源码的使用技巧和注意事项,需要的朋友参考一下 先来看看第一种实现方式 效果图如下: 不再采用ul li的布局方式 -webkit-transform-style:preserve-3d只对子元素有作用,所以每个div都加。 实例源码 第二种实现方式 效果图如下: 这个原先是隐藏的,点击后才展开

  • 本文向大家介绍JS实现选中当前菜单后高亮显示的导航条效果,包括了JS实现选中当前菜单后高亮显示的导航条效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果。分享给大家供大家参考。具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不

  • 问题内容: 因此,我已经能够通过开发人员的android页面获取我当前位置的定期更新,从而使您的应用知道位置。现在,只要我的位置发生变化,我就可以获取该位置的纬度和经度。但是,谁可以在Google Maps中实现呢? 下面的这一行在地图上实现了一个按钮,该按钮可找到我的当前位置并在其上放置一个蓝点/标记(不接收定期更新) mMap.setMyLocationEnabled(true); 我应该在活

  • 本文向大家介绍JavaScript导航脚本判断当前导航,包括了JavaScript导航脚本判断当前导航的使用技巧和注意事项,需要的朋友参考一下 废话不多说,直接给大家贴代码了。 以上所述是小编给大家介绍的JavaScript导航脚本判断当前导航,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 虽然我一直在四处寻找,但找不到正确的答案。在我的抽屉菜单头,我为用户提供了他的图像和姓名,但我也允许用户从应用程序中更改他/她的姓名和图像。这些更改存储在会话管理器中。现在我想在我的抽屉菜单头反映这些更改。一切都很好,因为当我关闭应用程序并再次运行它时,它显示了更改。所以现在我需要的是一种刷新抽屉菜单头的方法。 从配置文件片段中的库中选择图像。 主页活动