当前位置:首页 > 技术前沿 > 正文内容

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

狂龙16年前 (2010-09-20)技术前沿6

       利用cookie记忆当前位置的防刷新导航条,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能,在很多时候都可以用得到喔!

代码如下:
<!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;
}
// 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>
</body>
</html>

相关文章

解决ASP网站gb2312和utf-8乱码问题

经常做网站的人都知道,在同一个站点里使用不同编码的页面会产生乱码,比较常见的就是gb2312和Utf-8。当出现这种情况的时候也很好解决,我们做ASP网站时,一般都会用到conn.asp来连接数据库,...

asp判断数字奇偶数

很不错的一段代码,收藏下 function isEven(num) if not isNumeric(num) then'先判断是否为数字 isEven="这不是一个数字啊...

返回上一页并自动刷新页面的JavaScript

用JavaScript一般的使用history.go(-1)和history.back()等 但返回的是页面还是缓存中的数据,更新的数据不能马上呈现出来 这里只要使用一句简单的一条javasc...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。