JS实现可编辑的后台管理菜单功能【附demo源码下载】
更新时间：2016年09月13日 12:24:27 作者：onestopweb
这篇文章主要介绍了JS实现可编辑的后台管理菜单功能,涉及javascript针对页面元素的遍历及动态修改相关操作技巧,并附带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程序设计有所帮助。
相关文章
这篇文章主要介绍了PHPExcel中的一些常用方法汇总,本文直接给出操作代码实例,代码中对常用方法给出了注释,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了Js图片点击切换轮播实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要为大家详细介绍了微信小程序实现图片预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了在Js中去掉字符串中空格的实现方法。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要给大家介绍了关于微信小程序获取手机号踩坑的相关资料,详细记录了踩坑的过程以及解决的方法和猜想,通过示例代码以及图片介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家介绍了ECharts实现数据超出Y轴最大值max但不隐藏实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
JS格式化数字金额只留两位小数。写了个格式化函数。可以控制小数位数，自动四舍五入，感兴趣的朋友可以了解下2013-10-10
按键测试，支持像 Ctrl+Alt+Shift+T 的组合键
按键测试，支持像 Ctrl+Alt+Shift+T 的组合键...2006-10-10
这篇文章主要为大家详细介绍了JS+Canvas绘制动态时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论