JS操作Cookie实现菜单位置保存

2024-09-05 12:19:26

字体：大中小

来源：转载

供稿：网友

用JavaScript操作Cookie实现菜单保存的一个实例，如果你正在编写一个JS层拖动的功能，那么这段代码可以帮你实现拖动位置的保存，让浏览器去保存用户拖动网页某个层的位置，这样是不是方便了很多？

<!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:#003399;margin:28px;font-size:10.5pt;}#menu li{float:left;height:26px;line-height:26px;list-style:none}#menu li a{padding:10px;}a:hover{background:skyblue;color:#fff}a.hover{height:26px;line-height:26px;background:red;color:#fff}a,area{blr:e-xpression(this.onFocus=this.blur())}:focus{-moz-outline-style:none;} </style></head><body><font color=yellow>点击一下菜单，你可以刷新一下页面，是不是选中的菜单还停留在刚才的位置？<div id="menu">	<ul>	<li>首页</li>	<li>ASP源码</li>	<li>PHP源码</li>	<li>JSP源码</li>	<li>重置菜单</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;}// 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></body></html>

上一篇：清新带圆角的CSS竖向菜单

下一篇：又一个Css+JS清新的选项卡、滑动门

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注