javascript 代码简单的管理菜单

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>html中文网_www.0133.cn_简单的管理菜单</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></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="content"> <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需再刷新一下页面才能执行]

以上就是javascript 代码简单的管理菜单的详细内容，更多请关注0133技术站其它相关文章！