บทความนี้อธิบายการใช้งาน 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-ype" content = "text/html; charset = utf-8"/> <title> li, h2 {margin: 0; Padding: 0;} ul {list-style: none;}#top {width: 900px; ความสูง: 40px; มาร์จิ้น: 0 อัตโนมัติ; พื้นหลังสี: #cccc00} #top h2 {width: 150px; ความสูง: 40px; พื้นหลังสี: #99cc00; ลอย: ซ้าย; ขนาดตัวอักษร: 14px; TEXT-ALIGN: CENTER; Line-Height: 40px;}#toptags {width: 750px; ความสูง: 40px; มาร์จิ้น: 0 อัตโนมัติ; พื้นหลังสี: #CCCC00; ลอย: ซ้าย} #toptags ul li {float: ซ้าย; ความกว้าง: 100px; ความสูง: 25px; มาร์จิ้น-ขวา: 5px; แสดง: บล็อก; TEXT-ALIGN: CENTER; เคอร์เซอร์: ตัวชี้; Padding-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; TEXT-ALIGN: CENTER; ขอบด้านล่าง: 5px;} #leftmenu ul li a {color: #000000; การกำหนดข้อความ: ไม่มี;}#เนื้อหา {width: 750px; ความสูง: 500px; ลอย: ซ้าย} .content {width: 740px; ความสูง: 490px; แสดง: ไม่มี; ช่องว่าง: 5px; Overflow-y: อัตโนมัติ; Line-Height: 30px;}#footer {width: 900px; ความสูง: 30px; มาร์จิ้น: 0 อัตโนมัติ; พื้นหลังสี: #CCC; ระดับความสูง: 30px; TEXT-ALIGN: CENTER;}. Content1 {WIDTH: 740PX; ความสูง: 490px; แสดง: บล็อก; ช่องว่าง: 5px; Overflow-y: อัตโนมัติ; Line-Height: 30px;} </style> <script type = "text/javascript"> window.onload = function () {function $ (id) {return document.getElementById (id)} menu เมนู var = $ ("toptags"). getElementSbyTagname ("ul") ck = $ ("leftmenu"). getElementsByTagname ("ul") [0] .getElementsByTagname ("li"); // เมนูซ้าย var j; // คลิกเมนูทางด้านซ้ายเพื่อเพิ่มแท็กใหม่สำหรับ (i = 0; i <ck.length; i ++) {ck [i] .onclick = function () {$ ("ยินดีต้อนรับ"). style.display = "ไม่มี" // ยินดีต้อนรับเพื่อซ่อน ClearMenu (); this.style.background = "สีเหลือง"; // วนลูปเพื่อรับดัชนีปัจจุบันสำหรับ (j = 0; j <8; j ++) {ถ้า (this == ck [j]) {ถ้า ($ ("p"+j) == null) {opennew (j, this.innerhtml); // ตั้งแท็กแสดงข้อความ} clearstyle (); $ ("p"+j) .style.backgroundColor = "สีเหลือง"; ClearContent (); $ ("c"+j) .style.display = "บล็อก"; }} return false; }} // เพิ่มหรือลบฟังก์ชั่นแท็ก OpenNew (id, ชื่อ) {var tagmenu = document.createElement ("li"); tagmenu.id = "p"+id; tagmenu.innerhtml = name+""+"<img src = 'close.gif' style = 'แนวตั้ง-แนว: กลาง'/>"; // แท็กคลิกเหตุการณ์ tagmenu.onclick = function (evt) {clearmenu (); ck [id] .style.background = "สีเหลือง"; Clearstyle (); tagmenu.style.backgroundColor = "สีเหลือง"; ClearContent (); $ ("c"+id) .style.display = "block"; } // ปิดเหตุการณ์การคลิกภาพใน tagmenu.getElementsByTagname ("img") [0] .onclick = ฟังก์ชั่น (evt) {evt = (evt)? evt: (window.event)? window.event: null); if (evt.stoppropagation) {evt.stoppropagation ()} // ยกเลิกการทำงานของฟองสบู่โอเปร่าและ Safari; this.parentNode.parentNode.removeChild (tagmenu); // ลบแท็กปัจจุบัน var color = tagmenu.style.backgroundColor; // ตั้งค่าถ้าคุณปิดแท็กให้แท็กสุดท้ายได้รับโฟกัสถ้า (color == "#ffff00" || color == "เหลือง") {// ความแตกต่างของเบราว์เซอร์คำอธิบายของสีถ้า (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 = "สีเหลือง"; } else {clearContent (); Clearmenu (); $ ("ยินดีต้อนรับ"). style.display = "block"; }}} เมนู AppendChild (tagmenu); } // ล้างฟังก์ชั่นสไตล์เมนู clearmenu () {สำหรับ (i = 0; i <ck.length; i ++) {ck [i] .style.background = "#99cc00"; }} // ฟังก์ชั่นสไตล์แท็กล้าง ClearStyle () {สำหรับ (i = 0; i <tags.length; i ++) {menu.getElementSbyTagname ("li") [i] .style.backgroundColor = "#ffcc00"; }} // ล้างฟังก์ชั่นเนื้อหา ClearContent () {สำหรับ (i = 0; i <7; i ++) {$ ("c"+i) .style.display = "ไม่มี"; }}} </script> </head> <body> <div id = "top"> <h2> เมนูการจัดการ </h2> <div id = "toptags"> <ul> </ul> </div> </div> <div id = "หลัก"> <div id = "leftmenu"> <ul> <ul> <li> การนำทาง 4 </li> <li> การนำทาง 5 </li> <li> การนำทาง 6 </li> <li> การนำทาง 7 </li> </ul> </div> <div id = "เนื้อหา"> <div id = "welcome" style = "display: block;" <div id = "c0"> <a href = "###"> การนำทาง 1 </a> </div> <div id = "c1"> <a href = "###"> การนำทาง 2 </a> </div> <div id = "c2"> href = "###"> การนำทางสี่เนื้อหา </a> </div> <div id = "c4"> <a href = "###"> การนำทางห้าเนื้อหา </a> </div> <div id = "c5"> <a href = "###" สารบัญ </a> </div> </div> </div> <div id = "footer"> ลิขสิทธิ์ vevb.com </div> </body> </html>การเรนเดอร์การดำเนินการมีดังนี้:
คลิกที่นี่เพื่อดาวน์โหลดรหัสตัวอย่างที่สมบูรณ์
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเทคนิคการดำเนินการอาร์เรย์ JavaScript", "บทสรุปของวิธีการใช้งานทางคณิตศาสตร์ของ JavaScript ทางคณิตศาสตร์", "บทสรุปของโครงสร้างข้อมูล JavaScript และเทคนิคอัลการ์ เอฟเฟกต์และเทคนิคการเคลื่อนไหวของ JavaScript "," สรุปข้อผิดพลาดของ JavaScript และเทคนิคการดีบัก "และ" สรุปอัลกอริทึมและเทคนิคการสำรวจ JavaScript Traversal "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน