JS实现可编辑的后台管理菜单功能【附demo源码下载】

本文实例讲述了JS实现可编辑的后台管理菜单功能。分享给大家供大家参考，具体如下：

<！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=utf-8" /><title>JS可编辑后台菜单</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><script type="text/javascript">window.onload=function（）{function $（id）{return document.getElementById（id）}var menu=$（"topTags"）.getElementsByTagName（"ul"）[0];//顶部菜单容器var tags=menu.getElementsByTagName（"li"）;//顶部菜单var ck=$（"leftMenu"）.getElementsByTagName（"ul"）[0].getElementsByTagName（"li"）;//左侧菜单var j;//点击左侧菜单增加新标签for（i=0;i<ck.length;i++）{ck[i].onclick=function（）{$（"welcome"）.style.display="none"//欢迎内容隐藏clearMenu（）;this.style.background="yellow";//循环取得当前索引for（j=0;j<8;j++）{if（this==ck[j]）{if（$（"p"+j）==null）{openNew（j,this.innerHTML）;//设置标签显示文字}clearStyle（）;$（"p"+j）.style.backgroundColor="yellow";clearContent（）;$（"c"+j）.style.display="block";}}return false;}}//增加或删除标签function openNew（id,name）{var tagMenu=document.createElement（"li"）;tagMenu.id="p"+id;tagMenu.innerHTML=name+""+"<img src="close.gif" style="vertical-align:middle"/>";//标签点击事件tagMenu.onclick=function（evt）{clearMenu（）;ck[id].style.background="yellow";clearStyle（）;tagMenu.style.backgroundColor="yellow";clearContent（）;$（"c"+id）.style.display="block";}//标签内关闭图片点击事件tagMenu.getElementsByTagName（"img"）[0].onclick=function（evt）{evt=（evt）?evt:（（window.event）?window.event:null）;if（evt.stopPropagation）{evt.stopPropagation（）} //取消opera和Safari冒泡行为;this.parentNode.parentNode.removeChild（tagMenu）;//删除当前标签var color=tagMenu.style.backgroundColor;//设置如果关闭一个标签时，让最后一个标签得到焦点if（color=="#ffff00"||color=="yellow"）{//区别浏览器对颜色解释if（tags.length-1>=0）{clearStyle（）;tags[tags.length-1].style.backgroundColor="yellow";clearContent（）;var cc=tags[tags.length-1].id.split（"p"）;$（"c"+cc[1]）.style.display="block";clearMenu（）;ck[cc[1]].style.background="yellow";}else{clearContent（）;clearMenu（）;$（"welcome"）.style.display="block";}}}menu.appendChild（tagMenu）;}//清除菜单样式function clearMenu（）{for（i=0;i<ck.length;i++）{ck[i].style.background="#99CC00";}}//清除标签样式function clearStyle（）{for（i=0;i<tags.length;i++）{menu.getElementsByTagName（"li"）[i].style.backgroundColor="#FFCC00";}}//清除内容function clearContent（）{for（i=0;i<7;i++）{$（"c"+i）.style.display="none";}}}</script></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"><a href="###">导航一内容</a></div><div id="c1" class="content"><a href="###">导航二内容</a></div><div id="c2" class="content"><a href="###">导航三内容</a></div><div id="c3" class="content"><a href="###">导航四内容</a></div><div id="c4" class="content"><a href="###">导航五内容</a></div><div id="c5" class="content"><a href="###">导航六内容</a></div><div id="c6" class="content"><a href="###">导航七内容</a></div></div></div><div id="footer">copyright jb51.net </div></body></html>

运行效果图如下：

完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。