หลักการการใช้งานนั้นง่ายมากซึ่งคือการวนซ้ำผ่านโมดูลบทความแยกแท็ก H2 และ H3 และกำหนดเนื้อหาให้กับแผนผังชื่อเรื่องที่สร้างขึ้นใหม่
รหัสมีดังนี้:
รหัส HTML:
<div> <div id = "บทความ"> <h2> ชื่อเรื่องรอง </h2> <h3> ชื่อเรื่องรอง </h3> <p> สวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดี hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world โลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งอีกาโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งโลกโลกโลกโลกโลกหนึ่งหนึ่งโลกโลกโลกด้านโลกใบลาวลาม โลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งอีกาโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งโลกโลกโลกโลกโลกหนึ่งหนึ่งโลกโลกโลกด้านโลกใบลาวลาม โลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งอีกาโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งโลกโลกโลกโลกโลกหนึ่งหนึ่งโลกโลกโลกด้านโลกใบลาวลาม โลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งโลกโลกหนึ่งโลกหนึ่งอีกหนึ่งโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกโลกหนึ่งหนึ่งหนึ่งโลกโลกโลกโลกโลกโลกโลกใบโลกโลกโลกโลกใบโลกโลกใบโลก id = "articlemenu_box"> <span id = "articlemenu_open"> </span >< ul id = "articlemenu"> <span id = "articlemenu_close"> </span> </ul> </div> </div>
รหัส CSS:
* {มาร์จิ้น: 0; Padding: 0; ชายแดน: 0;} ร่างกาย {ตัวอักษร: 16px/1.5;} ul li, ol li {list-style: none;}. contextbox {ตำแหน่ง: ญาติ; ความกว้าง: 960px; มาร์จิ้น: 0 auto;}#บทความ {margin-left: 200px; ชายแดน: 1px #EEE SOLID; Padding: 15px;}. articlemenu a {การกำหนดข้อความ: ไม่มี; สี: #333;}. articlemenu a: hover {color: #f85455;}. articlemenu-box {width: 170px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 10px; ด้านบน: 10px;}. articlemenu {padding: 10px; ชายแดน: 1px Solid #CCC; Box-shadow: 2px 2px 2px #EEE;}. titleh2, .titleh3 {line-height: 1.5em;}. titleh2 {font-weight: bold;}. titleh3 {margin-left: 20px;}. articlemenu ตำแหน่ง: สัมบูรณ์; ขวา: 0; ด้านบน: 0; ความสูง: 44px; ความกว้าง: 44px; เคอร์เซอร์: ตัวชี้;}. articlemenu-open {พื้นหลัง: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png" แสดง: ไม่มี;}. articlemenu. articlemenu-close {พื้นหลัง: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png"รหัส JavaScript:
VAR บทความ = document.getElementById ("บทความ"); var articleHgroupMenu = document.getElementById ("articlemenu"); // ปิดและขยายเอกสารต้นไม้ var articlemenu_open = document.getElementById ("articlemenu_open"); var articlemenu_close document.getElementById ("articlemenu_close"); articlemenu_close.onclick = function () {atteringhgroupmenu.style.display = "ไม่มี"; articlemenu_open.style.display = "block";}; articlemenu_open.onclick = function () {atteringhgroupmenu.style.display = "block"; articlemenu_open.style.display = "none";}; // titlehgroup (บทความ, articlehgroupmenu, "titleh2", "titleh3"); // ได้รับองค์ประกอบชื่อที่มีชื่อ H2 ~ H3 Menulist เป็นองค์ประกอบ UL ที่มีรายการบทความที่สร้างขึ้นใหม่ // h2classname และ h3classname เป็นแอตทริบิวต์คลาสของ li-list ที่สอดคล้องกับ H2 และ H3 ในรายการบทความที่สร้างขึ้นใหม่ตามลำดับ ฟังก์ชั่น titlehgroup (hgroupparent, menulist, h2classname, h3classname) {var hgroup = hgroupparent.children; // สร้างส่วนเอกสารเพื่อห่อ li-list ที่สร้างขึ้นโดยอัตโนมัติซึ่งสอดคล้องกับ H2 และ H3 var fragment = document.createdocumentFragment (); สำหรับ (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1; i ++) {// สร้าง li-list สำหรับชื่อของประเภท // พารามิเตอร์คำอธิบาย: htype เป็นประเภทของชื่อเช่น H1 ~ h6; className เป็นค่าแอตทริบิวต์คลาสของรายการ LI ที่สอดคล้องกับชื่อ; ฟังก์ชั่น titletolist (htype, className) {var li = document.createElement ("li"); li.className = className; // เพิ่มแท็กภายในแท็ก LI และค้นหาด้วยจุดยึด hGroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); Fragment.appendchild (Li); } // เมื่อองค์ประกอบชื่อในการเดินทางคือ H2 ให้โทร Titletolist (HTYPE, className) เพื่อเพิ่มรายการ LI ที่เกี่ยวข้อง if (hGroup [i] .nodename.toLowerCase () == "H2") {titletolist ("H2", H2ClassName); } // เมื่อองค์ประกอบชื่อในการสำรวจคือ H3 ให้โทร titletolist (htype, className) เพื่อเพิ่มรายการ LI ที่เกี่ยวข้อง if (hGroup [i] .nodename.toLowerCase () == "H3") {titletolist ("H3", H3ClassName); }} // เพิ่มส่วนของชิ้นส่วนเอกสารที่มีการรวบรวมองค์ประกอบ LI ที่สอดคล้องกันไปยัง DOM (นั่นคือองค์ประกอบหลักที่ห่อรายการ LI ใน DOM); menulist.appendchild (ชิ้นส่วน);}รหัสตัวอย่างที่สมบูรณ์
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> Padding: 0; ชายแดน: 0;} ร่างกาย {ตัวอักษร: 16px/1.5;} ul li, ol li {list-style: none;}. contextbox {ตำแหน่ง: ญาติ; ความกว้าง: 960px; มาร์จิ้น: 0 auto;}#บทความ {margin-left: 200px; ชายแดน: 1px #EEE SOLID; Padding: 15px;}. articlemenu a {การกำหนดข้อความ: ไม่มี; สี: #333;}. articlemenu a: hover {color: #f85455;}. articlemenu-box {width: 170px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 10px; ด้านบน: 10px;}. articlemenu {padding: 10px; ชายแดน: 1px Solid #CCC; Box-shadow: 2px 2px 2px #EEE;}. titleh2, .titleh3 {line-height: 1.5em;}. titleh2 {font-weight: bold;}. titleh3 {margin-left: 20px;}. articlemenu ตำแหน่ง: สัมบูรณ์; ขวา: 0; ความสูง: 44px; ความกว้าง: 44px; เคอร์เซอร์: ตัวชี้;}. articlemenu-open {พื้นหลัง: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png" จอแสดงผล: ไม่มี;}. articlemenu. articlemenu-close {พื้นหลัง: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png" <h2> ชื่อเรื่องรอง < /h2> <h3> ชื่อเรื่องรอง < /h3> <p> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> hello <br /> สวัสดี <br /> hello <br /> hello <br /> hello <br /> hello <br /> hello <br /> hello <br /> hello <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> สวัสดี <br /> <br /> สวัสดี <br /> สวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดี สวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีสวัสดีโลก <h3 World <br /> ld World <br /> World <br /> World <br /> w <br /> orld World <br /> w <br /> orld World <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> /> orld w <br/> orld </p> <h3> ระดับ 3 ชื่อเรื่อง </h3> <h3> ระดับ 3 ชื่อเรื่อง </h3> <h2> ระดับ 3 ชื่อเรื่อง </h2> <h3> ระดับ 3 ชื่อ </h3> <h3> ระดับ 3 ชื่อ </h3> <h3> ระดับ 3 ชื่อเรื่อง </h3> <h3> ระดับ 3 ชื่อเรื่อง </h3> <h3> ระดับ 3 ชื่อ </h3> <h3> ระดับ 3 ชื่อเรื่อง </h3> </div> <div id = "articlemenu_box"> <span id = "articlemenu_open"> </span> </div> </div> <script type = "text/javaScript"> var article = document.getElementById ("บทความ"); var articlehroupmenu = document.getElementById ("articlemenu"); document.getElementById ("articlemenu_close"); articlemenu_close.onclick = function () {atteringhgroupmenu.style.display = "ไม่มี"; articlemenu_open.style.display = "block";}; articlemenu_open.onclick = function () {atteringhgroupmenu.style.display = "block"; articlemenu_open.style.display = "none";}; // titlehgroup (บทความ, articlehgroupmenu, "titleh2", "titleh3"); // ได้รับองค์ประกอบชื่อที่มีชื่อ H2 ~ H3 Menulist เป็นองค์ประกอบ UL ที่โฮสต์รายการบทความที่สร้างขึ้นใหม่ // h2classname และ h3classname เป็นแอตทริบิวต์คลาสของ li-list ที่สอดคล้องกับ H2 และ H3 ในรายการบทความที่สร้างขึ้นใหม่ ฟังก์ชั่น titlehgroup (hgroupparent, menulist, h2classname, h3classname) {var hgroup = hgroupparent.children; // สร้างส่วนเอกสารเพื่อห่อ li-list ที่สร้างขึ้นโดยอัตโนมัติซึ่งสอดคล้องกับ H2 และ H3 var fragment = document.createdocumentFragment (); สำหรับ (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1; i ++) {// สร้างรายการ li สำหรับชื่อของประเภท // พารามิเตอร์คำอธิบาย: htype เป็นประเภทของชื่อเช่น H1 ~ h6; className เป็นค่าแอตทริบิวต์คลาสของรายการ LI ที่สอดคล้องกับชื่อ; ฟังก์ชั่น titletolist (htype, className) {var li = document.createElement ("li"); li.className = className; // เพิ่มแท็กภายในแท็ก LI และวางตำแหน่งด้วยสมอ hGroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); Fragment.appendchild (Li); } // เมื่อองค์ประกอบชื่อในการเดินทางคือ H2 ให้โทร Titletolist (HTYPE, className) เพื่อเพิ่มรายการ LI ที่เกี่ยวข้อง if (hGroup [i] .nodename.toLowerCase () == "H2") {titletolist ("H2", H2ClassName); } // เมื่อองค์ประกอบชื่อในการสำรวจคือ H3 ให้โทร titletolist (htype, className) เพื่อเพิ่มรายการ LI ที่เกี่ยวข้อง if (hGroup [i] .nodename.toLowerCase () == "H3") {titletolist ("H3", H3ClassName); }} // เพิ่มส่วนเอกสารที่โฮสต์คอลเลกชัน LI Element ที่เกี่ยวข้องกับ DOM (นั่นคือองค์ประกอบหลักที่ห่อรายการ LI ใน DOM); Menulist.AppendChild (แฟรกเมนต์);} </script> </body> </html>สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของการสร้างแผนผังชื่อบทความโดยอัตโนมัติโดยใช้ JS ดั้งเดิม ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อพูดคุย