用cookie实现叶卡的记忆功能
之前在写叶卡切换的时候总需要把js代码写到html标签里面。
后来接触了闭包后知到一点点怎么通过闭包实现该功能。
之后又想通过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=utf-8" />
<title>test</title>
<style type="text/css">
.cl{
clear:both;
}
#menu{
width:600px;
height:30px;
}
#menu div{
display:inline;
float:left;
border:1px solid #000;
margin-left:4px;
width:80px;
height:30px;
line-height:30px;
padding:6px;
}
#menu .menu_on{
background:#FFC;
margin-bottom:-1px;
height:31px;
}
#content{
border:1px solid #000;
width:600px;
margin-left:4px;
}
.c_off{
display:none;
}
</style>
</head>
<body>
<div id="menu">
<div class="menu_off">浙江</div>
<div class="menu_off">沪鲁</div>
<div class="menu_off">中西部</div>
<div class="menu_off">其他</div>
</div>
<div id="content" class="cl">
<div class="c_off">浙江</div>
<div class="c_off">沪鲁</div>
<div class="c_off">中西部</div>
<div class="c_off">其他</div>
</div>
<script type="text/javascript">
myMenu=document.getElementById("menu");
menuDiv=myMenu.getElementsByTagName("div");
myContent=document.getElementById("content");
contentDiv=myContent.getElementsByTagName("div");
window.onload=function(){
cookieId=1;
cookieId=getCookie('menuId');
menuDiv[cookieId].className="menu_on";
contentDiv[cookieId].className="c_on";
for(var i=0;i<menuDiv.length;i++)
{
menuDiv[i].index=i;
(function(myid)
{
menuDiv[i].onclick=function()
{
for(var i=0;i<menuDiv.length;i++)
{
menuDiv[i].className="menu_off";
contentDiv[i].className="c_off";
}
this.className="menu_on";
contentDiv[myid].className="c_on";
cookieId=this.index;
setCookie('menuId',cookieId,365);
}
})(i);
}
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)//名称，值，过期时间
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)//setDate() 方法用于设置一个月的某一天。调整过的日期的毫秒表示。getDate月份中的某一天，使用本地时间。返回值是 1 ~ 31 之间的一个整数。
document.cookie=c_name+ "=" +escape(value)+//escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。可以使用 unescape() 对 escape() 编码的字符串进行解码。
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())//expires为过期时间。toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。不赞成使用此方法。请使用 toUTCString() 取而代之！
}
</script>
</body>
</html>
