javascript 代码简单的管理菜单

<!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>管理资源吧_www.glzy8.com_简单的管理菜单</title> 
<style type="text/css"> 
body{font-size:12px;} 
ul,li,h2{margin:0;padding:0;} 
ul{list-style:none;} 
#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} 
#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;} 
#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left} 
#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;} 
#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;} 
#leftMenu{width:150px;height:500px;background-color:#009900;float:left} 
#leftMenu ul{margin:10px;} 
#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;} 
#leftMenu ul li a{color:#000000;text-decoration:none;} 
#content{width:750px;height:500px;float:left} 
.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;} 
#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;} 
.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0Afunction%20%24(id)%7Breturn%20document.getElementById(id)%7D%20%0D%0Avar%20menu%3D%24(%22topTags%22).getElementsByTagName(%22ul%22)%5B0%5D%3B%2F%2F%E9%A1%B6%E9%83%A8%E8%8F%9C%E5%8D%95%E5%AE%B9%E5%99%A8%20%0D%0Avar%20tags%3Dmenu.getElementsByTagName(%22li%22)%3B%2F%2F%E9%A1%B6%E9%83%A8%E8%8F%9C%E5%8D%95%20%0D%0Avar%20ck%3D%24(%22leftMenu%22).getElementsByTagName(%22ul%22)%5B0%5D.getElementsByTagName(%22li%22)%3B%2F%2F%E5%B7%A6%E4%BE%A7%E8%8F%9C%E5%8D%95%20%0D%0Avar%20j%3B%20%0D%0A%2F%2F%E7%82%B9%E5%87%BB%E5%B7%A6%E4%BE%A7%E8%8F%9C%E5%8D%95%E5%A2%9E%E5%8A%A0%E6%96%B0%E6%A0%87%E7%AD%BE%20%0D%0Afor(i%3D0%3Bi%3Cck.length%3Bi%2B%2B)%7B%20%0D%0Ack%5Bi%5D.onclick%3Dfunction()%7B%20%0D%0A%24(%22welcome%22).style.display%3D%22none%22%2F%2F%E6%AC%A2%E8%BF%8E%E5%86%85%E5%AE%B9%E9%9A%90%E8%97%8F%20%0D%0A%2F%2F%E5%BE%AA%E7%8E%AF%E5%8F%96%E5%BE%97%E5%BD%93%E5%89%8D%E7%B4%A2%E5%BC%95%20%0D%0Afor(j%3D0%3Bj%3C8%3Bj%2B%2B)%7B%20%0D%0Aif(this%3D%3Dck%5Bj%5D)%7B%20%0D%0Aif(%24(%22p%22%2Bj)%3D%3Dnull)%7B%20%0D%0AopenNew(j%2Cthis.innerHTML)%3B%2F%2F%E8%AE%BE%E7%BD%AE%E6%A0%87%E7%AD%BE%E6%98%BE%E7%A4%BA%E6%96%87%E5%AD%97%20%0D%0A%20%7D%20%0D%0AclearStyle()%3B%20%0D%0A%24(%22p%22%2Bj).style.backgroundColor%3D%22yellow%22%3B%20%0D%0AclearContent()%3B%20%0D%0A%24(%22c%22%2Bj).style.display%3D%22block%22%3B%20%0D%0A%20%20%20%7D%20%0D%0A%20%7D%20%0D%0Areturn%20false%3B%20%0D%0A%20%20%7D%20%0D%0A%20%7D%20%0D%0A%2F%2F%E5%A2%9E%E5%8A%A0%E6%88%96%E5%88%A0%E9%99%A4%E6%A0%87%E7%AD%BE%20%0D%0Afunction%20openNew(id%2Cname)%7B%20%0D%0Avar%20tagMenu%3Ddocument.createElement(%22li%22)%3B%20%0D%0AtagMenu.id%3D%22p%22%2Bid%3B%20%0D%0AtagMenu.innerHTML%3Dname%2B%22%26nbsp%3B%26nbsp%3B%26nbsp%3B%22%2B%22%3Cimg%20src%3D'http%3A%2F%2Fwww.tjdadi.com.cn%2Foff.gif'%20style%3D'vertical-align%3Amiddle'%2F%3E%22%3B%20%0D%0A%2F%2F%E6%A0%87%E7%AD%BE%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%20%0D%0AtagMenu.onclick%3Dfunction(evt)%7B%20%0D%0AclearStyle()%3B%20%0D%0AtagMenu.style.backgroundColor%3D%22yellow%22%3B%20%0D%0AclearContent()%3B%20%0D%0A%24(%22c%22%2Bid).style.display%3D%22block%22%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E6%A0%87%E7%AD%BE%E5%86%85%E5%85%B3%E9%97%AD%E5%9B%BE%E7%89%87%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%20%0D%0AtagMenu.getElementsByTagName(%22img%22)%5B0%5D.onclick%3Dfunction(evt)%7B%20%0D%0Aevt%3D(evt)%3Fevt%3A((window.event)%3Fwindow.event%3Anull)%3B%20%0D%0Aif(evt.stopPropagation)%7Bevt.stopPropagation()%7D%20%2F%2F%E5%8F%96%E6%B6%88opera%E5%92%8CSafari%E5%86%92%E6%B3%A1%E8%A1%8C%E4%B8%BA%3B%20%0D%0Athis.parentNode.parentNode.removeChild(tagMenu)%3B%2F%2F%E5%88%A0%E9%99%A4%E5%BD%93%E5%89%8D%E6%A0%87%E7%AD%BE%20%0D%0Avar%20color%3DtagMenu.style.backgroundColor%3B%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E5%A6%82%E6%9E%9C%E5%85%B3%E9%97%AD%E4%B8%80%E4%B8%AA%E6%A0%87%E7%AD%BE%E6%97%B6%EF%BC%8C%E8%AE%A9%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E6%A0%87%E7%AD%BE%E5%BE%97%E5%88%B0%E7%84%A6%E7%82%B9%20%0D%0Aif(color%3D%3D%22%23ffff00%22%7C%7Ccolor%3D%3D%22yellow%22)%7B%2F%2F%E5%8C%BA%E5%88%AB%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E9%A2%9C%E8%89%B2%E8%A7%A3%E9%87%8A%20%0D%0Aif(tags.length-1%3E%3D0)%7B%20%0D%0AclearStyle()%3B%20%0D%0Atags%5Btags.length-1%5D.style.backgroundColor%3D%22yellow%22%3B%20%0D%0AclearContent()%3B%20%0D%0Avar%20cc%3Dtags%5Btags.length-1%5D.id.split(%22p%22)%3B%20%0D%0A%24(%22c%22%2Bcc%5B1%5D).style.display%3D%22block%22%3B%20%0D%0A%20%7D%20%0D%0Aelse%7B%20%0D%0AclearContent()%3B%20%0D%0A%24(%22welcome%22).style.display%3D%22block%22%20%0D%0A%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0Amenu.appendChild(tagMenu)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E6%B8%85%E9%99%A4%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%20%0D%0Afunction%20clearStyle()%7B%20%0D%0Afor(i%3D0%3Bi%3Ctags.length%3Bi%2B%2B)%7B%20%0D%0Amenu.getElementsByTagName(%22li%22)%5Bi%5D.style.backgroundColor%3D%22%23FFCC00%22%3B%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E6%B8%85%E9%99%A4%E5%86%85%E5%AE%B9%20%0D%0Afunction%20clearContent()%7B%20%0D%0Afor(i%3D0%3Bi%3C7%3Bi%2B%2B)%7B%20%0D%0A%24(%22c%22%2Bi).style.display%3D%22none%22%3B%20%0D%0A%20%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="top"> 
<h2>管理菜单</h2> 
<div id="topTags"> 
<ul> 
</ul> 
</div> 
</div> 
<div id="main">  
<div id="leftMenu"> 
<ul> 
<li>个人资料</li> 
<li>相册管理</li> 
<li>日志管理</li> 
<li>留言管理</li> 
<li>风格管理</li> 
<li>系统管理</li> 
<li>帮助信息</li> 
</ul> 
</div> 
 
<div id="welcome" class="content" style="display:block;"> 
  <div align="center"> 
    <p> </p> 
    <p><strong>欢迎使用用户管理系统！</strong></p> 
    <p> </p> 
    </div> 
</div> 
<div id="c0" class="content">个人资料</div> 
<div id="c1" class="content">相册管理</div> 
<div id="c2" class="content">日志管理</div> 
<div id="c3" class="content">留言管理</div> 
<div id="c4" class="content">风格管理</div> 
<div id="c5" class="content">系统管理</div> 
<div id="c6" class="content">帮助信息</div> 
</div> 
</div> 
<div id="footer">copyright for lalasxc </div> 
</body> 
</html>

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

教程首页更多教程