Cet article décrit la mise en œuvre JS des fonctions de menu de gestion des antécédents modifiables. Partagez-le pour votre référence, comme suit:
<! 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"> <éad> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> js menu édifiante </ title> <style type = "text / css"> body {font-size: 12 Li, H2 {marge: 0; rembourrage: 0;} ul {list-style: Aucun;} # top {width: 900px; hauteur: 40px; marge: 0 auto; Background-Color: # cccc00} #top h2 {width: 150px; hauteur: 40px; Color d'arrière-plan: # 99cc00; flottant: à gauche; taille de police: 14px; Texte-aligne: Centre; Line-Height: 40px;} # toptags {width: 750px; hauteur: 40px; marge: 0 auto; Color d'arrière-plan: # CCCC00; float: gauche} #toptags ul li {float: gauche; Largeur: 100px; hauteur: 25px; marge droite: 5px; Affichage: bloc; Texte-aligne: Centre; curseur: pointeur; padding-top: 15px;} # main {largeur: 900px; hauteur: 500px; marge: 0 auto; Background-Color: # f5f7e6;} # LeftMenu {width: 150px; hauteur: 500px; Color d'arrière-plan: # 009900; float: Left} #leftMenu ul {margin: 10px;} # LeftMenu ul li {width: 130px; hauteur: 30px; Affichage: bloc; Contexte: # 99cc00; curseur: pointeur; hauteur de ligne: 30px; Texte-aligne: Centre; marge-fond: 5px;} # LeftMenu ul li a {couleur: # 000000; text-décoration: aucun;} # contenu {largeur: 750px; hauteur: 500px; float: Left} .Content {width: 740px; hauteur: 490px; Affichage: aucun; rembourrage: 5px; débordement-y: auto; line-height: 30px;} # footer {width: 900px; hauteur: 30px; marge: 0 auto; Color d'arrière-plan: #ccc; hauteur de ligne: 30px; Text-Align: Center;}. Content1 {Width: 740px; hauteur: 490px; Affichage: bloc; rembourrage: 5px; débordement-y: auto; LINE-HEIGHT: 30px;} </ style> <script type = "text / javascrip var ck = $ ("LeftMenu"). GetElementsByTagName ("ul") [0] .getElementsByTAGName ("li"); // Le menu gauche var j; // cliquez sur le menu à gauche pour ajouter une nouvelle balise pour (i = 0; i <ck.length; i ++) {ck [i] .onclick = function () {$ ("bienvenue"). Style.display = "non" // bienvenue pour cacher clearMenu (); this.style.background = "jaune"; // Loop pour obtenir l'index actuel pour (j = 0; j <8; j ++) {if (this == ck [j]) {if ($ ("p" + j) == null) {openNew (j, this.innerhtml); // définir la balise pour afficher le texte} clearStyle (); $ ("p" + j) .style.backgroundcolor = "jaune"; ClearContent (); $ ("c" + j) .style.display = "block"; }} return false; }} // Ajouter ou supprimer la fonction de balise openNew (id, name) {var tagmeu = document.createElement ("li"); tagmenu.id = "p" + id; tagmenu.innerhtml = name + "" + "<img src = 'close.gif' style = 'vertical-align: middle' />"; // TAG Cliquez sur l'événement tagMenu.OnClick = fonction (evt) {ClearMenu (); ck [id] .style.background = "jaune"; clearstyle (); tagmenu.style.backgroundcolor = "jaune"; ClearContent (); $ ("c" + id) .style.display = "block"; } // Fermez l'événement de clic de l'image dans tagMenu.getElementsByTagName ("img") [0] .OnClick = function (evt) {evt = (evt)? Evt: ((window.event)? Window.event: null); if (evt.stoppropagation) {evt.stoppropagation ()} // annuler le comportement de l'opéra et de la bulle safari; this.parentNode.parentNode.removechild (TagMenu); // Supprimer le tag actuel var color = tagmenu.style.backgroundColor; // Définissez si vous fermez une balise, laissez la dernière balise se concentrer si (color == "# ffff00" || color == "jaune") {// Browser de différence Explication de Color if (tags.length-1> = 0) {ClearStyle (); Tags [tags.length-1] .style.backgroundcolor = "jaune"; ClearContent (); var cc = tags [tags.length-1] .id.split ("p"); $ ("c" + cc [1]). style.display = "block"; ClearMenu (); ck [cc [1]]. style.background = "jaune"; } else {clearContent (); ClearMenu (); $ ("bienvenue"). style.display = "bloc"; }}} menu.appendChild (TagMenu); } // Fonction de style de menu Clear ClearMenu () {for (i = 0; i <ck.length; i ++) {ck [i] .style.background = "# 99cc00"; }} // Fonction de style de balise Clear ClearStyle () {for (i = 0; i <tags.length; i ++) {menu.getElementsByTagName ("li") [i] .style.backgroundColor = "# fccc00"; }} // Clear Content function clearContent () {for (i = 0; i <7; i ++) {$ ("c" + i) .style.display = "non"; }}} </ script> </ head> <body> <div id = "top"> <h2> menu de gestion </h2> <div id = "toptags"> <ul> </ul> </v> </ div> <div id = "Main"> <div id = "LeftMenu"> <ul> <li> Navigation 1 </li> <li> navigation 2 </li> <li> Navigation 1 </li> <li> Navigation 2 </li> <li> Navigation 3 </li> NAVIGAT <li> Navigation 4 </li> <li> Navigation 5 </li> <li> Navigation 6 </li> <li> Navigation 7 </li> </ul> </ div> <div id = "Content"> <div id = "bienvenue" style = "Affichage: Block;"> <div align = "Center"> <p> </p> <p> <strong> bienvenue </strong> <div id = "c0"> <a href = "###"> navigation 1 </a> </div> <div id = "c1"> <a href = "###"> Navigation 2 </a> </v> <div id = "c2"> <a href = "###"> Navigation 3 </a> </v> <v id = "c3"> <a href = "###"> navigation quatre contenus </a> </div> <div id = "c4"> <a href = "###"> Navigation cinq contenus </a> </v> <div id = "c5"> <a href = "###"> Navigation six contenus </a> </v> <div id = "c6"> <a href = "##" Contenu </a> </div> </div> </div> <div id = "footer"> Copyright Vevb.com </div> </ body> </html>Les rendus d'opération sont les suivants:
Cliquez ici pour télécharger l'exemple complet du code.
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des techniques d'opération de réalité JavaScript", "Résumé des techniques d'opération de l'opération mathématique JavaScript", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des effets de commutation javascript Effets et techniques de l'animation JavaScript "," Résumé des erreurs JavaScript et des techniques de débogage "et" Résumé des algorithmes et techniques de traversée JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.