JS實現(xiàn)可編輯的后臺管理菜單功能【附demo源碼下載】
更新時間：2016年09月13日 12:24:27 作者：onestopweb
這篇文章主要介紹了JS實現(xiàn)可編輯的后臺管理菜單功能,涉及javascript針對頁面元素的遍歷及動態(tài)修改相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)可編輯的后臺管理菜單功能。分享給大家供大家參考，具體如下：
<!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");//左側(cè)菜單
var j;
//點擊左側(cè)菜單增加新標(biāo)簽
for(i=0;i<ck.length;i++){
ck[i].onclick=function(){
$("welcome").style.display="none"http://歡迎內(nèi)容隱藏
clearMenu();
this.style.background="yellow";
//循環(huán)取得當(dāng)前索引
for(j=0;j<8;j++){
if(this==ck[j]){
if($("p"+j)==null){
openNew(j,this.innerHTML);//設(shè)置標(biāo)簽顯示文字
}
clearStyle();
$("p"+j).style.backgroundColor="yellow";
clearContent();
$("c"+j).style.display="block";
}
}
return false;
}
}
//增加或刪除標(biāo)簽
function openNew(id,name){
var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+" "+"<img src='close.gif' style='vertical-align:middle'/>";
//標(biāo)簽點擊事件
tagMenu.onclick=function(evt){
clearMenu();
ck[id].style.background="yellow";
clearStyle();
tagMenu.style.backgroundColor="yellow";
clearContent();
$("c"+id).style.display="block";
}
//標(biāo)簽內(nèi)關(guān)閉圖片點擊事件
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);//刪除當(dāng)前標(biāo)簽
var color=tagMenu.style.backgroundColor;
//設(shè)置如果關(guān)閉一個標(biāo)簽時，讓最后一個標(biāo)簽得到焦點
if(color=="#ffff00"||color=="yellow"){//區(qū)別瀏覽器對顏色解釋
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";
}
}
//清除標(biāo)簽樣式
function clearStyle(){
for(i=0;i<tags.length;i++){
menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
}
}
//清除內(nèi)容
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>導(dǎo)航一</li>
<li>導(dǎo)航二</li>
<li>導(dǎo)航三</li>
<li>導(dǎo)航四</li>
<li>導(dǎo)航五</li>
<li>導(dǎo)航六</li>
<li>導(dǎo)航七</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="###">導(dǎo)航一內(nèi)容</a></div>
<div id="c1" class="content"><a href="###">導(dǎo)航二內(nèi)容</a></div>
<div id="c2" class="content"><a href="###">導(dǎo)航三內(nèi)容</a></div>
<div id="c3" class="content"><a href="###">導(dǎo)航四內(nèi)容</a></div>
<div id="c4" class="content"><a href="###">導(dǎo)航五內(nèi)容</a></div>
<div id="c5" class="content"><a href="###">導(dǎo)航六內(nèi)容</a></div>
<div id="c6" class="content"><a href="###">導(dǎo)航七內(nèi)容</a></div>
</div>
</div>
<div id="footer">copyright jb51.net </div>
</body>
</html>
運行效果圖如下：
完整實例代碼點擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript數(shù)學(xué)運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- JS實現(xiàn)適合于后臺使用的動畫折疊菜單效果
- js實現(xiàn)的后臺左側(cè)管理菜單代碼
- jsp中將后臺傳遞過來的json格式的list數(shù)據(jù)綁定到下拉菜單select
- 前臺JS(jquery ajax)調(diào)用后臺方法實現(xiàn)無刷新級聯(lián)菜單示例
- js類后臺管理菜單類-MenuSwitch
- JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
- ExtJS中設(shè)置下拉列表框不可編輯的方法
- 使用js實現(xiàn)一個可編輯的select下拉列表
- 讓你的網(wǎng)站可編輯的實現(xiàn)js代碼
- 用javascript實現(xiàn)div可編輯的常見方法
相關(guān)文章
使用bat打開多個cmd窗口執(zhí)行g(shù)ulp、node
本文主要介紹了使用bat打開多個cmd窗口執(zhí)行g(shù)ulp、node的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
js實現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
這篇文章主要介紹了js實現(xiàn)操作cookie的常見方法,結(jié)合實例形式分析了js操作cookie創(chuàng)建、讀取、刪除相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2020-03-03
昨天給同事一起玩耍，同事給我出了一道代碼題目，是關(guān)于typeof的，感覺挺好玩的，在此分享給大家，順便鞏固下自己對typeof知識點的總結(jié)2016-02-02
innerHTML動態(tài)添加html代碼和腳本兼容多個瀏覽器
innerHTML動態(tài)添加html代碼和腳本，給某個元素的innerHTML賦值,并使得值中的js代碼有效且兼容多個瀏覽器，很棒的一個方法2014-10-10
這篇文章主要介紹了JS常用倒計時代碼,結(jié)合實例形式總結(jié)分析了JS常用的倒計時功能實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-02-02
JavaScript 聯(lián)動的無限級封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動
JavaScript 聯(lián)動的無限級封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動2010-06-06
這篇文章主要給大家介紹了JS中可能會常用到的一些數(shù)據(jù)處理方法,好多知識寫下來也能加深一下自身的記憶,文中給出了詳細的實例代碼,對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了JS如何獲取Promise對象里面的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
es6數(shù)組的flat()，flatMap()函數(shù)用法實例分析
這篇文章主要介紹了es6數(shù)組的flat()，flatMap()函數(shù)用法,結(jié)合實例形式分析了es6數(shù)組的flat()，flatMap()函數(shù)基本功能、使用方法及操作注意事項,需要的朋友可以參考下2020-04-04
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04