Hogyan lehet automatikusan létrehozni a HTML-foglalatok tartalmát?
Tartalomjegyzék nagymértékben javíthatja például számos webhely felhasználói élményét dokumentációs oldalak vagy online enciklopédiák mint Wikipedia. Egy jól megtervezett tartalomjegyzék áttekintést ad az oldalról és segít abban, hogy a felhasználók gyorsan navigálhassanak az általuk érdekelt szakaszra.
Hagyományosan HTML-ben vagy JavaScript-ben is létrehozhat tartalomjegyzéket, de az utóbbi időben szabványosított HTML slotok biztosítják a közepe a kettő között. HTML slot egy webes szabvány, amely lehetővé teszi helyőrzőket adjon hozzá egy weblaphoz és később dinamikusan töltse ki tartalmát.
Mikor kell használni
Helyezhet
Ezzel a technikával kézzel kell létrehozni a tartalomjegyzék HTML forráskódját. A JavaScript csak automatikusan létrehozza a tartalomjegyzék szöveges tartalmát, az oldalon található címsorok vagy alszámok alapján.
Ha nem szeretné, hogy tartalomjegyzéket jelenítsen meg a szükséges HTML-ben készítsen mind az elrendezést, mind a tartalmat a JavaScript segítségével.
1. Hozza létre a HTML-t
A TOC (tartalomjegyzék) HTML forráskódja lesz belül a címke. A kód belsejében addig nem kap, amíg JavaScript hozzá nem adja a dokumentumhoz. A TOC-nak lesz helyőrzők, tartott
A név attribútum rés attribútumot a dokumentum megfelelő fejléceiben és alszámaiban.
Alább látható a HTML minta Velociraptor (latinul a "gyors szeizátor") egy… Velociraptor közepes méretű dromaeosaurid volt, felnőttekkel… A dromaeosauridok fosszíliái primitívebbek, mint… Az Amerikai Természettudományi Múzeum expedíciója alatt ... A Velociraptor tagja az Eudromaeosauria csoportnak, egy származékos alcsoportjának. Az 1971-ben talált "Dinoszauruszok elleni küzdelem" példánya megőrzi a ... 2010-ben Hone és munkatársai közzétettek egy könyvet… A Velociraptor bizonyos fokig melegvérű volt, mivel a ... Egy Velociratoptor mongoliensis koponya két párhuzamos ... Amint láthatod, minden fejléc egyedi És itt van A TOC HTML kódja, belül a A fenti két kódrészleten vegye figyelembe a megfelelő Mielőtt megvizsgálná a JavaScript kódot, amely hozzáadja a TOC-t a Győződjön meg róla, hogy a Most hozzáadjuk a forgatókönyvet beszúrja a TOC-t a A fenti kódrészlet létrehoz egy másolatot Ezután a klónozott Ha visszaállítanánk a CSS számlálót a Íme a kimenet képernyőképe: Ha akarod kapcsolja össze a TOC címeket a megfelelő fejlécekkel és alszámokkal hozzáadásával Velociraptor (latinul a "gyors szeizátor") egy… Velociraptor közepes méretű dromaeosaurid volt, felnőttekkel… A dromaeosauridok fosszíliái primitívebbek, mint… Mint látható, a És a A tartalomjegyzékben található címek rögzítve vannak: A fenti sorban minden Lásd a képernyőképet kapcsolódó tartalomjegyzék lent: Megnézheted, letöltheted vagy villogjátok a Github Repó által a hozzászólásban használt kódot. néhány fejléc és alszám. A
Leírás
Tollak
A felfedezés története
Osztályozás
Paleobiológiai
Szennyező viselkedés
Anyagcsere
Patológia
rés érték. címke.
rés és név attribútumok a fejlécek és a 2. Számítsa be a fejléceket
a dokumentumhoz a CSS számlálók segítségével adjon hozzá sorszámokat a fejlécekhez. cikk counter-reset: head; cikk h2 :: előtt counter-increment: fejléc; tartalom: '0' számláló (címsor) ':';
counter-reset a szabály az elemhez tartozik minden, a rés tulajdonság (ami az eleme a kódunkban).3. Helyezze be a TOC-t a dokumentumba
címke, benne tartály. templateContent = document.querySelector ('sablon'). article = document.querySelector ('cikk'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector (# toc '). AppendChild (cikk); és hozzáad egy árnyék DOM-fát. Mi is hozzáad egy példányt tartalma a Shadow DOM fához. be van helyezve a elem a TOC-ben is jelen van, mindazonáltal csak azok a címsorok és alszámok láthatók, amelyek a TOC-n belüli helyőrzőt találták. test vagy html elem helyett cikk, a számláló megszámlálta volna a TOC-n belüli címsorok listáját is. Ezért kell állítsa vissza a számlálókat a címsorok közvetlen szülőjénél.
4. Hiperhivatkozások hozzáadása
id a címsorokhoz és a megfelelő TOC-szöveg rögzítéséhez távolítsa el az ismétlődést id a klónozott értékek cikk.
Leírás
Tollak
id attribútum minden cikkhez és alfejezethez hozzáadódik.
id attribútumok eltávolították a klónozott cikkből előtt az Árnyék DOM fának hozzáfűzése. templateContent = document.querySelector ('sablon'). article = document.querySelector ('cikk'). cloneNode (true); article.querySelectorAll ('* [id]') .EU ((ele) => ele.removeAttribute ('id')) article.attachShadow (mód: 'zárt'). appendChild (templateContent.cloneNode (igaz )); document.querySelector (# toc '). AppendChild (cikk); 
Github demó
