Dieser Artikel beschreibt die JS -Implementierung von Menüfunktionen des bearbeitbaren Hintergrundmanagements. Teilen Sie es für Ihre Referenz wie folgt weiter:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS-editable Hintergrund-Menü </title> <style type ul ul ul ul ul ul ul ul uld uld uld uld Li, H2 {Margin: 0; Padding: 0;} ul {Listenstil: Keine;}#top {width: 900px; Höhe: 40px; Rand: 0 Auto; Hintergrundfarbe: #CCCC00} #TOP H2 {Breite: 150px; Höhe: 40px; Hintergrundfarbe: #99CC00; float: links; Schriftgröße: 14px; Text-Align: Mitte; Zeilenhöhe: 40px;}#toptags {width: 750px; Höhe: 40px; Rand: 0 Auto; Hintergrundfarbe: #CCCC00; float: links} #toptags ul li {float: links; Breite: 100px; Höhe: 25px; Rand-Rechts: 5px; Anzeige: Block; Text-Align: Mitte; Cursor: Zeiger; Padding-Top: 15px;}#main {width: 900px; Höhe: 500px; Rand: 0 Auto; Hintergrundfarbe: #f5f7e6;} #linkMenu {width: 150px; Höhe: 500px; Hintergrundfarbe: #009900; float: links} #leftmenu ul {margin: 10px;}#linkMenu ul li {width: 130px; Höhe: 30px; Anzeige: Block; Hintergrund: #99CC00; Cursor: Zeiger; Zeilenhöhe: 30px; Text-Align: Mitte; Rand-Bottom: 5px;} #linke li li a {color: #000000; Textdekoration: Keine;}#Inhalt {Breite: 750px; Höhe: 500px; float: links} .content {width: 740px; Höhe: 490px; Anzeige: Keine; Polsterung: 5px; Überlauf-y: Auto; Zeilenhöhe: 30px;}#footer {width: 900px; Höhe: 30px; Rand: 0 Auto; Hintergrundfarbe: #CCC; Zeilenhöhe: 30px; text-align: center;}. content1 {width: 740px; Höhe: 490px; Anzeige: Block; Polsterung: 5px; Überlauf-y: Auto; Zeilenhöhe: 30px;} </style> <script type = "text/javaScript"> window.onload = function () {function $ (id) {return document.getElementById (id)} var mseu = $ ("toptags"). CK = $ ("linkMenu"). // Klicken Sie auf das Menü links, um ein neues Tag für (i = 0; i <ck.length; i ++) {CK [i] .onclick = function () {$ ("Willkommen"). this.style.background = "gelb"; // Schleifen Sie den aktuellen Index für (j = 0; j <8; j ++) {if (this == CK [j]) {if ($ ("p"+j) == null) {openNew (j, this.innerHtml); // Setzen Sie das Tag, um Text anzuzeigen}} clearstyle (); $ ("p"+j) .style.backgroundcolor = "gelb"; ClearContent (); $ ("C"+J) .Style.display = "Block"; }} return false; }} // Tag hinzufügen oder löschen tag openNew (id, name) {var TagMenu = document.createelement ("li"); tagmenu.id = "p"+id; TagMenu.innerhtml = Name+""+"<img src = 'close.gif' style = 'Vertical-Align: Middle'/>"; // Tag klicke Ereignis tagMenu.onclick = function (evt) {clearMenu (); CK [id] .style.background = "gelb"; ClearStyle (); tagmenu.style.backgroundcolor = "gelb"; ClearContent (); $ ("c"+id) .style.display = "block"; } // Schließen Sie das Bild klicken Sie im TagMenu.getElementsByTagName ("img") [0] .onclick = function (evt) {evt = (evt)? Evt: ((window.event)? Window.event: null); if (evt.stoppropagation) {evt.stoppropagation ()} // Opera und Safari -Blasenverhalten; this.parentnode.parentnode.removechild (TagMenu); // Löschen Sie das aktuelle Tag var color = TagMenu.style.backgroundColor; // Setzen Sie, wenn Sie ein Tag schließen, lassen Sie das letzte Tag Fokus erhalten, wenn (color == "#ffff00" || color == "gelb") {// Differenzbrowser Erläuterung von 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 (); $ ("willkommen"). style.display = "block"; }}} Menü.AppendChild (TagMenu); } // Funktionsstil -Funktion löschen ClearMenu () {für (i = 0; i <ck.length; i ++) {CK [i] .Style.background = "#99cc00"; }} // Tag -Style -Funktion Clearstyle () {für (i = 0; i <tags.length; i ++) {mseu.getElementsByTagName ("li") [i] .style.backgroundcolor = "#ffcc00"; }} // Inhaltsfunktion löschen clearContent () {für (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 Inhalt </a> </div> </div> </div> <div id = "footer"> copyright vevb.com </div> </body> </html>Die Operationsrenderungen sind wie folgt:
Klicken Sie hier, um den vollständigen Beispielcode herunterzuladen.
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 -Animationseffekte und -techniken "," Zusammenfassung von JavaScript -Fehlern und Debugging -Techniken "und" Zusammenfassung der JavaScript -Traversalalgorithmen und -techniken "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.