This article describes the JS implementation of editable background management menu functions. Share it for your reference, as follows:
<!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 editable background menu</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];//Top menu container var tags=menu.getElementsByTagName("li");//Top menu var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//Left menu var j; //Click the menu on the left to add a new tag for(i=0;i<ck.length;i++){ ck[i].onclick=function(){ $("welcome").style.display="none"//Welcome to hide clearMenu(); this.style.background="yellow"; //Loop to get the current index for(j=0;j<8;j++){ if(this==ck[j]){ if($("p"+j)==null){ openNew(j,this.innerHTML);//Set the tag to display text} clearStyle(); $("p"+j).style.backgroundColor="yellow"; clearContent(); $("c"+j).style.display="block"; } } return false; } } //Add or delete tag function openNew(id,name){ var tagMenu=document.createElement("li"); tagMenu.id="p"+id; tagMenu.innerHTML=name+" "+"<img src='close.gif' style='vertical-align:middle'/>"; //Tag click event tagMenu.onclick=function(evt){ clearMenu(); ck[id].style.background="yellow"; clearStyle(); tagMenu.style.backgroundColor="yellow"; clearContent(); $("c"+id).style.display="block"; } //Close the image click event in the tagMenu.getElementsByTagName("img")[0].onclick=function(evt){ evt=(evt)?evt:((window.event)?window.event:null); if(evt.stopPropagation){evt.stopPropagation()} //Cancel opera and Safari bubble behavior; this.parentNode.parentNode.removeChild(tagMenu);//Delete the current tag var color=tagMenu.style.backgroundColor; //Set if you close a tag, let the last tag get focus if(color=="#ffff00"||color=="yellow"){//Difference browser explanation of color 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); } //Clear menu style function clearMenu(){ for(i=0;i<ck.length;i++){ ck[i].style.background="#99CC00"; } } //Clear tag style function clearStyle(){ for(i=0;i<tags.length;i++){ menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00"; } } //Clear content function clearContent(){ for(i=0;i<7;i++){ $("c"+i).style.display="none"; } }}</script></head><body><div id="top"> <h2>Management menu</h2> <div id="topTags"> <ul> </ul> </div></div><div id="main"> <div id="leftMenu"> <ul> <li>Navigation 1</li> <li>Navigation 2</li> <li>Navigation 3</li> <li>Navigation 4</li> <li>Navigation 5</li> <li>Navigation 6</li> <li>Navigation 7</li> </ul> </div> <div id="content"> <div id="welcome" style="display:block;"> <div align="center"> <p> </p> <p><strong>Welcome</strong></p> <p> </p> </div> </div> <div id="c0"><a href="###">Navigation 1</a></div> <div id="c1"><a href="###">Navigation 2</a></div> <div id="c2"><a href="###">Navigation 3</a></div> <div id="c3"><a href="###">Navigation four contents</a></div> <div id="c4"><a href="###">Navigation five contents</a></div> <div id="c5"><a href="###">Navigation six contents</a></div> <div id="c6"><a href="###">Navigation seven contents</a></div> </div></div><div id="footer">copyright VeVB.COM </div></body></html>The operation renderings are as follows:
Click here to download the complete example code.
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript array operation techniques", "Summary of JavaScript mathematical operation usage methods", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques" and "Summary of JavaScript traversal algorithms and techniques"
I hope this article will be helpful to everyone's JavaScript programming.