В этой статье описывается реализация 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 edable foane menu </title> <style = "text/css"> hods {hody {hody {> font-size: li, H2 {маржа: 0; Padding: 0;} ul {list-style: none;}#top {width: 900px; Высота: 40px; Поле: 0 Авто; фоновый цвет: #cccc00} #top h2 {width: 150px; Высота: 40px; фоновый цвет: #99CC00; Плавание: осталось; размер шрифта: 14px; Текст-альбом: Центр; Линия-высота: 40px;}#toptags {width: 750px; Высота: 40px; Поле: 0 Авто; фоновый цвет: #cccc00; float: слева} #toptags ul li {float: left; Ширина: 100px; Высота: 25px; Право маржи: 5px; дисплей: блок; Текст-альбом: Центр; курсор: указатель; накладная-top: 15px;}#main {width: 900px; Высота: 500px; Поле: 0 Авто; фоновый цвет: #f5f7e6;} #Leftmenu {width: 150px; Высота: 500px; фоновый цвет: #009900; float: слева} #leftmenu ul {margin: 10px;}#Leftmenu ul li {width: 130px; Высота: 30px; дисплей: блок; Фон: #99CC00; курсор: указатель; высота линии: 30px; Текст-альбом: Центр; Margin-Bottom: 5px;} #Leftmenu ul li a {color: #000000; Текстовое декорация: none;}#content {width: 750px; Высота: 500px; float: left} .content {width: 740px; Высота: 490px; дисплей: нет; Заполнение: 5px; Overflow-y: Auto; линий-высота: 30px;}#cooler {width: 900px; Высота: 30px; Поле: 0 Авто; фоновый цвет: #CCC; высота линии: 30px; Text-Align: Center;}. Content1 {ширина: 740px; Высота: 490px; дисплей: блок; Заполнение: 5px; Overflow-y: Auto; Line-Height: 30px;} </style> <script type = "text/javascript"> window.onload = function () {function $ (id) {return document.getElementbyId (id)} var menu = $ ("toptags"). tags = menu.getElementsbytagname ("li"); // Top Menu var ck = $ ("Leftmenu"). getElementsbytagname ("ul") [0] .getElementsbytagname ("li"); // Left Menu var J; // щелкните меню слева, чтобы добавить новый тег для (i = 0; i <ck.length; i ++) {ck [i] .onclick = function () {$ ("joven"). Style.display = "none" // добро пожаловать, чтобы скрыть clearmenu (); this.style.background = "желтый"; // цикл, чтобы получить текущий индекс для (j = 0; j <8; j ++) {if (this == ck [j]) {if ($ ("p"+j) == null) {opennew (j, this.innerhtml); // set tag на отображение текста} clearStyle (); $ ("p"+j) .style.backgroundcolor = "желтый"; clearContent (); $ ("c"+j) .style.display = "block"; }} вернуть false; }} // добавить или удалить функцию тега 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 = "желтый"; clearStyle (); tagmenu.style.backgroundcolor = "желтый"; 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 ()} // Отмена поведения оперы и сафари; this.parentnode.parentnode.removechild (Tagmenu); // Удалить текущий тег var color = tagmenu.style.backgroundcolor; // Установить, если вы закроете тег, пусть последний тег получит фокус if (color == "#ffff00" || color == "желтый") {// разница в браузере объяснение цвета if (tags.length-1> = 0) {clearStyle (); теги [Tags.length-1] .style.backgroundcolor = "желтый"; clearContent (); var cc = теги [tags.length-1] .id.split ("p"); $ ("c"+cc [1]). style.display = "block"; clearmenu (); CK [CC [1]]. Style.background = "желтый"; } else {clearContent (); clearmenu (); $ ("добро пожаловать"). style.display = "block"; }}} menu.appendchild (Tagmenu); } // Очистить функцию стиля меню clearmenu () {for (i = 0; i <ck.length; i ++) {ck [i] .style.background = "#99cc00"; }} // Очистить функцию стиля тега 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> меню управления </h2> <div id = "toptags"> <ul> </ul> </div> </div> <div id = "main"> <vive id = "Leftmenu"> <ul> vagigation 1 </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <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 = "###"> Навигация 1 </a> </div> <div id = "c1"> <a href = "###"> Навигация 2 </a> </div> <div id = "c2"> <a href = "##"> Навигация 3 </a> </div> <div id = "C3" href = "###"> навигация четыре содержимого </a> </div> <div id = "c4"> <a href = "###"> Навигация пять содержимого </a> </div> <div Id = "c5"> <a href = "##"> Навигация шесть </a> </div> <div ID = "c6"> <a hRef = "#############################href ="#href. СодержимоеОперация визуализации следующие:
Нажмите здесь, чтобы загрузить полный пример кода.
Для получения дополнительной информации о контенте, связанном с JavaScript, пожалуйста, ознакомьтесь с темами этого сайта: «Сводка методов работы массива JavaScript», «Сводка математических методов использования математической операции JavaScript», «Сводка структур данных Javascript и методы алгоритма», «Суммируют эффекты переключения Javascript и методы Summary», «Суммические методы Javascript Algorites», «Суммические методы Javascript», «Подборы», «Суммические методы Javascript», «Подборы», «Суммические методы», «Суммические методы». Эффекты и методы анимации JavaScript »,« Сводка ошибок и методов отладки JavaScript »и« Сводка алгоритмов и методов обхода JavaScript
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.