JS后台菜单效果，可刷新保持-CSDN博客

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="UTF-8"lang="UTF-8">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="Content-Language"content="UTF-8"/>
<title>后台管理</title>
<styletype="text/css">
body{margin:0;text-align:center;color:#000;font:normal12pxArial,Verdana,Tahoma;text-align:center;background:#C8D0D5;line-height:150%;}
a:link,a:visited{color:#385065;text-decoration:none}
a:hover{text-decoration:underline}
#menu{width:150px;margin:0px15px;padding:0px;text-align:left;list-style:none}
#menu.item{margin:5px0px;padding:0px;list-style:none}
a.title:link,a.title:visited,a.title:hover{display:block;background:url(http://www.tblog.com.cn/attachments/month_0609/m20069110491.gif)no-repeat;color:#385065;font-weight:bold;padding:2px0022px;width:128px;line-height:23px;cursor:pointer;text-decoration:none}
#menu.itemul{border:1pxsolid#9FACB7;margin:0;width:118px;padding:3px0px3px30px;background:#fff;list-style:none;display:none}
#menu.itemulli{display:block;}
</style>
<scriptlanguage="javascript"type="text/javascript">
//---获取ClassName
document.getElementsByClassName=function(cl){
varretnode=[];
varmyclass=newRegExp('\\b'+cl+'\\b');
varelem=this.getElementsByTagName('*');
for(varj=0;j<elem.length;j++){
varclasses=elem[j].className;
if(myclass.test(classes))retnode.push(elem[j]);
}
returnretnode;
}

//---隐藏所有
functionHideAll(){
varitems=document.getElementsByClassName("optiton");
for(varj=0;j<items.length;j++){
items[j].style.display="none";
}
}

//---设置cookie
functionsetCookie(sName,sValue,expireHours){
varcookieString=sName+"="+escape(sValue);
//;判断是否设置过期时间
if(expireHours>0){
vardate=newDate();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+";expire="+date.toGMTString();
}
document.cookie=cookieString;
}

//---获取cookie
functiongetCookie(sName){
varaCookie=document.cookie.split(";");
for(varj=0;j<aCookie.length;j++){
varaCrumb=aCookie[j].split("=");
if(escape(sName)==aCrumb[0])
returnunescape(aCrumb[1]);
}
returnnull;
}

window.οnlοad=function(){
varshow_item="opt_1";
if(getCookie("show_item")!=null){
show_item="opt_"+getCookie("show_item");
}
document.getElementById(show_item).style.display="block";
varitems=document.getElementsByClassName("title");
for(varj=0;j<items.length;j++){
items[j].οnclick=function(){
varo=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>
<ulid="menu">
<liclass="item"><ahref="javascript:void(0)"class="title"name="1">基本信息</a>
<ulid="opt_1"class="optiton">
<li><ahref="#">企业简介</a></li>
<li><ahref="#">企业新闻</a></li>
</ul>
</li>
<liclass="item"><ahref="javascript:void(0)"class="title"name="2">系统管理</a>
<ulid="opt_2"class="optiton">
<li><ahref="#">企业简介</a></li>
<li><ahref="#">企业新闻</a></li>
</ul>
</li>
<liclass="item"><ahref="javascript:void(0)"class="title"name="3">系统管理</a>
<ulid="opt_3"class="optiton">
<li><ahref="#">会员管理</a></li>
<li><ahref="#">管理员设置</a></li>
<li><ahref="#">权限组设置</a></li>
<li><ahref="#">退出系统</a></li>
</ul>
</li>
</ul>
</body>
</html>