이 기사에서는 편집 가능한 배경 관리 메뉴 기능의 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 editable background> <스타일 타입 = "text/css"> body {font-size : rize,}; H2 {마진 : 0; 패딩 : 0;} ul {list-style : none;}#상단 {너비 : 900px; 높이 : 40px; 여백 : 0 Auto; 배경색 : #cccc00} #top h2 {너비 : 150px; 높이 : 40px; 배경색 : #99cc00; 플로트 : 왼쪽; 글꼴 크기 : 14px; 텍스트 정렬 : 센터; 라인 높이 : 40px;}#toptags {너비 : 750px; 높이 : 40px; 여백 : 0 Auto; 배경색 : #CCCC00; float : left} #toptags ul li {float : 왼쪽; 너비 : 100px; 높이 : 25px; 마진 오른쪽 : 5px; 디스플레이 : 블록; 텍스트 정렬 : 센터; 커서 : 포인터; 패딩 탑 : 15px;}#main {너비 : 900px; 높이 : 500px; 여백 : 0 Auto; 배경색 : #f5f7e6;} #leftmenu {너비 : 150px; 높이 : 500px; 배경색 : #009900; float : left} #LeftMenu ul {마진 : 10px;}#leftmenu ul li {너비 : 130px; 높이 : 30px; 디스플레이 : 블록; 배경 : #99CC00; 커서 : 포인터; 라인 높이 : 30px; 텍스트 정렬 : 센터; 마진-바닥 : 5px;} #leftmenu ul li a {color : #000000; 텍스트 설명 : 없음;}#content {너비 : 750px; 높이 : 500px; float : left} .Content {너비 : 740px; 높이 : 490px; 디스플레이 : 없음; 패딩 : 5px; 오버플로 -Y : 자동; 선-높이 : 30px;}#바닥 글 {너비 : 900px; 높이 : 30px; 여백 : 0 Auto; 배경색 : #CCC; 라인 높이 : 30px; 텍스트-정렬 : 중심;}. content1 {너비 : 740px; 높이 : 490px; 디스플레이 : 블록; 패딩 : 5px; 오버플로 -Y : 자동; line-height : 30px;} </style> <script type = "text/javaScript"> wind 메뉴 var ck = $ ( "leftmenu"). getElementsByTagName ( "ul") [0] .getElementsByTagName ( "li"); // 왼쪽 메뉴 var j; // 왼쪽의 메뉴를 클릭하여 (i = 0; i <ck.length; i ++) {ck [i] .onclick = function () {$ ( "환영"). style.display = "none"에 대한 새 태그를 추가하십시오. this.style.background = "옐로우"; // (j = 0; $ ( "p"+j) .style.backgroundColor = "Yellow"; ClearContent (); $ ( "c"+j) .style.display = "block"; }} 거짓을 반환합니다. }} // 태그 함수 추가 또는 삭제 OpenNew (id, name) {var tagmenu = document.createElement ( "li"); tagmenu.id = "p"+id; tagmenu.innerhtml = name+""+"<img src = 'close.gif'style = 'vertical-align : middle'/>"; // 태그 클릭 이벤트 tagmenu.onclick = function (evt) {clearmenu (); ck [id] .style.background = "옐로우"; 클리어 스타일 (); tagmenu.style.backgroundColor = "Yellow"; ClearContent (); $ ( "c"+id) .style.display = "block"; } // agmenu.getEmentsByTagName에서 이벤트를 클릭하면 ( "IMG") if (evt.stopPropagation) {evt.stopPropagation ()} // 오페라 및 사파리 버블 동작을 취소합니다. this.parentNode.parentNode.removeChild (Tagmenu); // 현재 태그 var var color = tagmenu.style.backgroundColor; // 태그를 닫으면 설정을 설정하고 마지막 태그가 초점을 맞추도록하십시오 (color == "#ffff00"|| color == "옐로우") {// 차이 브라우저 if (tags.length-1> = 0) {clearstyle (); 태그 [tags.length-1] .style.backgroundcolor = "옐로우"; 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 (); $ ( "환영"). 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 CONTER CONTER 함수 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 id = "main"> <div id = "leftmenu"> <ul> <li> navigation 1 <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> 내비게이션 4 </li> <li> 내비게이션 5 </li> <li> 내비게이션 6 </li> <li> 내비게이션 7 </li> </ul> </li> </li> </ul> </li> <div id = "div id ="welcome "style ="display : block; "> <div allign ="center "> <p> </p> <p> <div id = "c0"> <a href = "###"> 내비게이션 1 </a> </div> <div id = "c1"> <a href = "###"> 탐색 2 </a> </div> <div id = "c2"> <a href = "###"> navigation 3 </div> <c3 <c3 <c3 < "> href = "###"> Navigation 4 내용 </a> </a> </div> <div id = "c4"> <a href = "###"> 탐색 5 내용 </a> </div> <div id = "c5"> <a href = "###"> 탐색 6 내용 </a> <div id = "c6"> 내용 </a> </div> </div> </div> <div id = "바이트"> Copyright vevb.com </div> </body> </html>작동 렌더링은 다음과 같습니다.
전체 예제 코드를 다운로드하려면 여기를 클릭하십시오.
JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript Array Operation Techniques의 요약", "JavaScript 수학 운영 사용 방법의 요약", "JavaScript 데이터 구조 및 알고리즘 요약", "JavaScript Switching Effects 및"JavaScript Switching Effect 및 "JavaScript 기술의 요약", "JavaScript 기술의 요약", "JavaScript 기술의 요약", "JavaScript 기술의 요약", "JavaScript Switching Effection의 요약" " JavaScript 애니메이션 효과 및 기술 ","JavaScript 오류 및 디버깅 기술 요약 "및"JavaScript Traversal 알고리즘 및 기술의 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.