网页刷新后保持菜单的原状态

一般菜单刷新后，当前的选中状态会失效，本代码用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(){
11cookie.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 >

 

转载于:https://www.cnblogs.com/Lion5859/articles/1504402.html