javascript实现操作cookie实现的可记忆菜单_导航菜单

来源：动视网责编：小采时间：2020-11-27 20:37:27

javascript实现操作cookie实现的可记忆菜单_导航菜单

javascript实现操作cookie实现的可记忆菜单_导航菜单: 可记忆菜单 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} #me

推荐度：

点击下载本文 文档为doc格式

导读javascript实现操作cookie实现的可记忆菜单_导航菜单: 可记忆菜单 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} #me

<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> 
 
// --- 获取ClassName 
document.getElementsByClassName = function(cl) { 
 var retnode = []; 
 var myclass = new RegExp('\\b'+cl+'\\b'); 
 var elem = this.getElementsByTagName('*'); 
 for (var j = 0; j < elem.length; j++) { 
 var classes = elem[j].className; 
 if (myclass.test(classes)) retnode.push(elem[j]); 
 } 
 return retnode; 
} 
// --- 隐藏所有 
function HideAll() { 
 var items = document.getElementsByClassName("optiton"); 
 for (var j=0; j<items.length; j++) { 
 items[j].style.display = "none"; 
 } 
} 
// --- 设置cookie 
function setCookie(sName,sValue,expireHours) { 
 var cookieString = sName + "=" + escape(sValue); 
 //;判断是否设置过期时间 
 if (expireHours>0) { 
 var date = new Date(); 
 date.setTime(date.getTime + expireHours * 3600 * 1000); 
 cookieString = cookieString + "; expire=" + date.toGMTString(); 
 } 
 document.cookie = cookieString; 
} 
//--- 获取cookie 
function getCookie(sName) { 
 var aCookie = document.cookie.split("; "); 
 for (var j=0; j < aCookie.length; j++){ 
 var aCrumb = aCookie[j].split("="); 
 if (escape(sName) == aCrumb[0]) 
 return unescape(aCrumb[1]); 
 } 
 return null; 
} 
window.onload = function() { 
 var show_item = "opt_1"; 
 if (getCookie("show_item") != null) { 
 show_item= "opt_" + getCookie("show_item"); 
 } 
 document.getElementById(show_item).style.display = "block"; 
 var items = document.getElementsByClassName("title"); 
 for (var j=0; j<items.length; j++) { 
 items[j].onclick = function() { 
 var o = document.getElementById("opt_" + this.name); 
 if (o.style.display != "block") { 
 HideAll(); 
 o.style.display = "block"; 
 setCookie("show_item",this.name); 
 } 
 else { 
 o.style.display = "none"; 
 } 
 } 
 } 
} 
</ script> 
</head> 
<body> 
 
 <li class="item">菜单选项一 
 
 <li>子菜单一</li> 
 <li>子菜单二</li> 
 <li>子菜单三</li> 
 <li>子菜单四</li> 
 
 </li> 
 <li class="item">菜单选项二 
 
 <li>子菜单一</li> 
 <li>子菜单二</li> 
 <li>子菜单三</li> 
 <li>子菜单四</li> 
 
 </li> 
 <li class="item">菜单选项三 
 
 <li>子菜单一</li> 
 <li>子菜单二</li> 
 <li>子菜单三</li> 
 <li>子菜单四</li> 
 
 </li> 
 <li class="item">菜单选项四 
 
 <li>子菜单一</li> 
 <li>子菜单二</li> 
 <li>子菜单三</li> 
 <li>子菜单四</li> 
 
 </li> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript实现操作cookie实现的可记忆菜单_导航菜单

推荐度：

点击下载本文 文档为doc格式

标签：导航可以 js

热门焦点

javascript实现操作cookie实现的可记忆菜单_导航菜单

javascript实现操作cookie实现的可记忆菜单_导航菜单

javascript实现操作cookie实现的可记忆菜单_导航菜单

最新推荐

猜你喜欢

热门推荐