资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript实现操作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>可记忆菜单</title> <style type="text/css"> body {font:12px Tahoma, sans-serif;color:#4D4D4D;margin:0px; text-align:center} a{color:#4D4D4D;text-decoration:none} a:hover{color:#AD0000;text-decoration:none} #menu {width:160px;margin:0px;padding:0px;text-align:left;list-style:none;border:1px solid #B0D4ED} #menu .item {margin:0px;padding:0px;list-style:none; text-align:center} a.title:link,a.title:visited,a.title:hover {display:block;height:30px;line-height:30px; margin-top:1px;background:#E1F2FD;border-top:1px solid #B0D4ED;border-bottom:1px solid #B0D4ED;font-weight:bold;} #menu .item ul {margin:0;list-style:none;display:none;text-align:center} #menu .item ul li {height:24px;line-height:22px;border-bottom:1px solid #BFDBEE;margin:0 20px} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2F%20---%20%E8%8E%B7%E5%8F%96ClassName%20%0D%0Adocument.getElementsByClassName%20%3D%20function(cl)%20%7B%20%0D%0A%20%20%20%20var%20retnode%20%3D%20%5B%5D%3B%20%0D%0A%20%20%20%20var%20myclass%20%3D%20new%20RegExp('%5C%5Cb'%2Bcl%2B'%5C%5Cb')%3B%20%0D%0A%20%20%20%20var%20elem%20%3D%20this.getElementsByTagName('*')%3B%20%0D%0A%20%20%20%20for%20(var%20j%20%3D%200%3B%20j%20%3C%20elem.length%3B%20j%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20classes%20%3D%20elem%5Bj%5D.className%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(myclass.test(classes))%20retnode.push(elem%5Bj%5D)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20retnode%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20---%20%E9%9A%90%E8%97%8F%E6%89%80%E6%9C%89%20%0D%0Afunction%20HideAll()%20%7B%20%0D%0A%20%20%20%20var%20items%20%3D%20document.getElementsByClassName(%22optiton%22)%3B%20%0D%0A%20%20%20%20for%20(var%20j%3D0%3B%20j%3Citems.length%3B%20j%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20items%5Bj%5D.style.display%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20---%20%E8%AE%BE%E7%BD%AEcookie%20%0D%0Afunction%20setCookie(sName%2CsValue%2CexpireHours)%20%7B%20%0D%0A%20%20%20%20var%20cookieString%20%3D%20sName%20%2B%20%22%3D%22%20%2B%20escape(sValue)%3B%20%0D%0A%20%20%20%20%2F%2F%3B%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E8%AE%BE%E7%BD%AE%E8%BF%87%E6%9C%9F%E6%97%B6%E9%97%B4%20%0D%0A%20%20%20%20if%20(expireHours%3E0)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20var%20date%20%3D%20new%20Date()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20date.setTime(date.getTime%20%2B%20expireHours%20*%203600%20*%201000)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20cookieString%20%3D%20cookieString%20%2B%20%22%3B%20expire%3D%22%20%2B%20date.toGMTString()%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.cookie%20%3D%20cookieString%3B%20%0D%0A%7D%20%0D%0A%2F%2F---%20%E8%8E%B7%E5%8F%96cookie%20%0D%0Afunction%20getCookie(sName)%20%7B%20%0D%0A%20%20var%20aCookie%20%3D%20document.cookie.split(%22%3B%20%22)%3B%20%0D%0A%20%20for%20(var%20j%3D0%3B%20j%20%3C%20aCookie.length%3B%20j%2B%2B)%7B%20%0D%0A%20%20%20%20var%20aCrumb%20%3D%20aCookie%5Bj%5D.split(%22%3D%22)%3B%20%0D%0A%20%20%20%20if%20(escape(sName)%20%3D%3D%20aCrumb%5B0%5D)%20%0D%0A%20%20%20%20%20%20return%20unescape(aCrumb%5B1%5D)%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20return%20null%3B%20%0D%0A%7D%20%0D%0Awindow.onload%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20var%20show_item%20%3D%20%22opt_1%22%3B%20%0D%0A%20%20%20%20if%20(getCookie(%22show_item%22)%20!%3D%20null)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20show_item%3D%20%22opt_%22%20%2B%20getCookie(%22show_item%22)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20document.getElementById(show_item).style.display%20%3D%20%22block%22%3B%20%0D%0A%20%20%20%20var%20items%20%3D%20document.getElementsByClassName(%22title%22)%3B%20%0D%0A%20%20%20%20for%20(var%20j%3D0%3B%20j%3Citems.length%3B%20j%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20items%5Bj%5D.onclick%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20o%20%3D%20document.getElementById(%22opt_%22%20%2B%20this.name)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(o.style.display%20!%3D%20%22block%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20HideAll()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.style.display%20%3D%20%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20setCookie(%22show_item%22%2Cthis.name)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.style.display%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <ul id="menu"> <li class="item"><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" class="title" name="1">菜单选项一</a> <ul id="opt_1" class="optiton"> <li><a href="#" _ewebeditor_ta_href="%23">子菜单一</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单二</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单三</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单四</a></li> </ul> </li> <li class="item"><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" class="title" name="2">菜单选项二</a> <ul id="opt_2" class="optiton"> <li><a href="#" _ewebeditor_ta_href="%23">子菜单一</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单二</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单三</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单四</a></li> </ul> </li> <li class="item"><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" class="title" name="3">菜单选项三</a> <ul id="opt_3" class="optiton"> <li><a href="#" _ewebeditor_ta_href="%23">子菜单一</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单二</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单三</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单四</a></li> </ul> </li> <li class="item"><a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" class="title" name="4">菜单选项四</a> <ul id="opt_4" class="optiton"> <li><a href="#" _ewebeditor_ta_href="%23">子菜单一</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单二</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单三</a></li> <li><a href="#" _ewebeditor_ta_href="%23">子菜单四</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程