Velociraptor (som betyr "swift seizer" på latin) er en ...
Beskrivelse
Velociraptor var en mellomstor dromaeosaurid, med voksne ...
fjær
Fossiler av dromaeosaurider mer primitiv enn ...
Oppdagelseshistorie
Under et amerikansk museum for naturhistorisk ekspedisjon ...
Klassifisering
Velociraptor er medlem av gruppen Eudromaeosauria, en avledet undergruppe av ...
Paleobiology
"Fighting Dinosaurs" -prøven, funnet i 1971, opprettholder en ...
Skjeveadferd
I 2010 publiserte Hone og kollegaer et papir på ...
metabolisme
Velociraptor var varmblodig i noen grad, da det krevde en ...
Patologi
En Velociratoptor mongoliensis skalle bærer to parallelle ...
Som du ser, får hver overskrift en unik slot .
Og her er HTML-koden til TOC, inne i a stikkord.
I de to kodestykket ovenfor merker du de tilhørende slot og navnegenskapene i overskriftene og
2. Nummer overskriftene
Før du ser på JavaScript-koden som vil legge til TOC fra til dokumentet, la oss legge til serienumre for overskriftene, ved hjelp av CSS-tellere .
artikkel {counter-reset: heading; } artikkel h2 :: før {counter-increment: heading; innhold: '0'counter (heading)': '; } Kontroller at motstandsinnstillingsregelen tilhører elementet som er nærmeste forelder for alle titlene som bærer sporetattributtet (som er det
3. Sett inn TOC i dokumentet
Nå legger vi til skriptet som legger inn TOC over
templateContent = document.querySelector ('mal'). innhold; artikkel = document.querySelector ('article'). cloneNode (true); article.attachShadow ({modus: 'lukket'}). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (artikkel).; Kodestykket ovenfor lager en kopi av
Så klonet Hvis vi ville tilbakestille CSS-telleren på Her er skjermbildet av utgangen: Hvis du vil koble TOC-titlene til deres respektive overskrifter og underposisjoner ved å legge til Velociraptor (som betyr "swift seizer" på latin) er en ... Velociraptor var en mellomstor dromaeosaurid, med voksne ... Fossiler av dromaeosaurider mer primitiv enn ... Som du kan se over, legges Og titlene i innholdsfortegnelsen er forankret : I den ekstra linjen ovenfor fjernes alle Se skjermbildet av den koblede innholdsfortegnelsen nedenfor: Du kan sjekke ut, laste ned eller gaffel koden som brukes i dette innlegget fra vår Github Repo. Redigerer reisebilder: 8 tips du bør vite [infographic] Reise er like mye om destressing og å ha det gøy som det er en viktig del av vår egen vekst. Livet er et eventyr og reisefotografier er et bevis for at verden er et stort, stort sted verdt å utforske.Hvis du reiser mye og elsker å dele om dine reiser, vil du kanskje bruke litt tid på å redigere bildene dine før du deler dem. For å 20 nydelige eksempler på tidslinje i webdesign for inspirasjon Jeg er ganske sikker på at de fleste av dere er klar over bruken av tidslinjen i design, spesielt siden alle Facebook-profiler nå vises på denne måten. I tillegg bruker enkelte smarttelefonapplikasjoner som Path eller Tweetbot også tidslinjebasert design for å vise frem sine historier. En tidslinje er en av de beste måtene å vise kronologiske hendelser i en pen og nøyaktig stil.Den kan body eller html elementet i stedet for article, ville telleren ha telt listen over overskrifter i TOC også. Det er derfor du burde tilbakestille tellerne på den nærmeste overordnet av overskriftene .
4. Legg til hyperkoblinger id i overskriftene og forankre deres tilsvarende TOC-tekst, må du fjerne de repeterende id verdiene fra den klonede article . Beskrivelse
fjær
id attributtet til hver overskrift og underposisjon i artikkelen .id attributter fra den klonte artikkelen før du legger til Shadow DOM-treet. templateContent = document.querySelector ('mal'). innhold; artikkel = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id' '). forEach ((ele) => {ele.removeAttribute (' id ')}) artikkel.attachShadow ({modus:' lukket '}). appendChild (templateContent.cloneNode )); document.querySelector ( '# toc') appendChild (artikkel).; 
Github demo ![Redigerer reisebilder: 8 tips du bør vite [infographic]](http://hideout-lastation.com/img/tech-design-tips/168/editing-travel-photos.jpg)
