网页刷新后保持菜单的原状态
一般菜单刷新后，当前的选中状态会失效，本代码用cookie和jquery来解决这个问题，代码如下；
其中，jquery仅仅用了他的each方法，以减少代码量，你完全可以把onclick事件要执行的代码分离出来，然后通过其他方式调用，而不是像我这样批量处理:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>艾恩ASP学习Blog-天下没有免费的午餐,这里有免费的Asp大餐</title>
6 <script type="text/javascript" src="jquery.js"></script>
7
<script type="text/javascript">
8
$(document).ready(function(){
9 $("#menu > a").each(function(i){
10this.onclick=function(){
11
cookie.SET("Aien_currentID",this.id,365);
12
};
13 });
14 var currentID=cookie.GET("Aien_currentID");
15 if(currentID!=null){
16$("#" + currentID).css({"background-color":"#eee","color":"red"});
17 }
18});
19var cookie={
20 SET : function(name, value, days) {var expires = "";if (days) {var d = new Date();d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);expires = "; expires=" + d.toGMTString();}document.cookie = name + "=" + value + expires + "; path=/";},
21GET : function (name) {var re = new RegExp("(\;|^)[^;]*(" + name + ")\=([^;]*)(;|$)");var res = re.exec(document.cookie);return res != null ? res[3] : null;}
22};
23
</script>
24 </head>
25
26 <body>
27 <div id="container">
28 <div id="menu">
29 <a href="index.html" id="m1">首页</a>
30 <a href="index.html" id="m2">心情日志</a>
31 <a href="index.html" id="m3">程序随笔</a>
32 <a href="index.html" id="m4">资源分享</a>
33 <a href="index.html" id="m5">艾恩作品</a>
34 <a href="index.html" id="m6">留言簿</a>
35 </div>
36</div>
37</body>
38</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>艾恩ASP学习Blog-天下没有免费的午餐,这里有免费的Asp大餐</title>6
<script type="text/javascript" src="jquery.js"></script>7
<script type="text/javascript">
8
$(document).ready(function(){
$(document).ready(9
$("#menu > a").each(function(i){10
this.onclick=function(){11
cookie.SET("Aien_currentID",this.id,365);12
};13
});14
var currentID=cookie.GET("Aien_currentID");15
if(currentID!=null){16
$("#" + currentID).css({"background-color":"#eee","color":"red"});17
}18
});19
var cookie={20
SET : function(name, value, days) {var expires = "";if (days) {var d = new Date();d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);expires = "; expires=" + d.toGMTString();}document.cookie = name + "=" + value + expires + "; path=/";},21
GET : function (name) {var re = new RegExp("(\;|^)[^;]*(" + name + ")\=([^;]*)(;|$)");var res = re.exec(document.cookie);return res != null ? res[3] : null;}22
};23
</script>24
</head>25
26
<body>27
<div id="container"> 28
<div id="menu">29
<a href="index.html" id="m1">首页</a>30
<a href="index.html" id="m2">心情日志</a>31
<a href="index.html" id="m3">程序随笔</a>32
<a href="index.html" id="m4">资源分享</a>33
<a href="index.html" id="m5">艾恩作品</a>34
<a href="index.html" id="m6">留言簿</a>35
</div>36
</div>37
</body>38
</html>
浙公网安备 33010602011771号