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

时间:2020-05-12 人气:0

<!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> 
<script language="javascript" type="text/javascript"> 
// --- 获取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> 
<ul id="menu"> 
    <li class="item"><a href="javascript:void(0)" class="title" name="1">菜单选项一</a> 
      <ul id="opt_1" class="optiton"> 
          <li><a href="#">子菜单一</a></li> 
          <li><a href="#">子菜单二</a></li> 
          <li><a href="#">子菜单三</a></li> 
          <li><a href="#">子菜单四</a></li> 
      </ul> 
    </li> 
    <li class="item"><a href="javascript:void(0)" class="title" name="2">菜单选项二</a> 
      <ul id="opt_2" class="optiton"> 
          <li><a href="#">子菜单一</a></li> 
          <li><a href="#">子菜单二</a></li> 
          <li><a href="#">子菜单三</a></li> 
          <li><a href="#">子菜单四</a></li> 
      </ul> 
    </li> 
    <li class="item"><a href="javascript:void(0)" class="title" name="3">菜单选项三</a> 
      <ul id="opt_3" class="optiton"> 
          <li><a href="#">子菜单一</a></li> 
          <li><a href="#">子菜单二</a></li> 
          <li><a href="#">子菜单三</a></li> 
          <li><a href="#">子菜单四</a></li> 
      </ul> 
    </li> 
    <li class="item"><a href="javascript:void(0)" class="title" name="4">菜单选项四</a> 
      <ul id="opt_4" class="optiton"> 
          <li><a href="#">子菜单一</a></li> 
          <li><a href="#">子菜单二</a></li> 
          <li><a href="#">子菜单三</a></li> 
          <li><a href="#">子菜单四</a></li> 
      </ul> 
    </li> 
</ul>     
</body> 
</html>

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

加载全部内容