När du skapar markering för längre skriftliga bitar på en enda sida är det ofta viktigt att skapa navigeringsstrukturer för att hoppa mellan olika delar av den texten. Detta stöds nationellt i HTML, så att vi kan hoppa över till sektioner på en sida och även besöka dem direkt från externa länkar.
En lista bortsett - här ser du sektionslänken och "fragmentidentifieraren" (hash taggen ...) i webbadressenHjälpdokumentationen på GitHub är en annan plats där du hittar dynamiska sektionslänkar
I denna handledning diskuterar vi en teknik för att dynamiskt generera dessa länkar med JavaScript, och sedan animera dem med hjälp av CSS. Låt oss dyka in!
Markup
Det första nödvändiga steget är att skapa lämplig markering för ditt skriftliga stycke. Vi antar att du har en artikel, och inuti den artikeln finns det många sektions, var och en med sin egen h1 tagg och efterföljande innehåll.
Så här ser din HTML ut:
Här är en del
Mobiliserar stolthetskampanjkampanj, grundkriterier räddar liv mänskliga rättigheter donerar empowerment. Generositet Klimatförändringar, sårbara befolkning globala ledare varaktig förändring. Utfall, ärliga utvecklingsnationer avbryter mänsklig centrerad design; genomförande UNHCR många röster process.
Offentlig sektor fria uttryck meningsfulla, enablerare; Andrew Carnegie Bloomberg, framväxande globaliserings kris situation. Kön, jämställdhet sanning långsiktig förbättring kvalitet ungdom medborgaransvar jämställdhet skalbar slut hungersnabb Medicin du Monde byrå förändring liv.
Social analys, affiliate; hörnsten livräddande bidragsgivare Jane Addams fritt tal, förändringsrörelser lyfta människor upp sociala utmaningar positiv social förändring disruptor framtid.
Notera: Som du kan se tillämpar vi en id till de separata sektionerna. Vi väljer att göra detta eftersom id är faktiskt relaterad till själva sektionen, inte den h1 märka.
Att hoppa till ett element med en given id På en sida skapar du en ankare med en href värde lika med hashmärket följt av id. Till exempel, i vårt exempel innehåll ovanifrån, för att hoppa till det andra avsnittet kan vi skapa följande länk:
Andra delen
Det finns många sätt att göra detta: Du kan koda länkarna manuellt, du kan använda en abstraktion som bygger upp din avsnitt HTML, inklusive länken. I denna handledning kommer vi dock att använda JavaScript för att generera länkarna dynamiskt.
Vanilj JS
Här är JavaScript:
var sektioner = document.querySelectorAll ('section'); för (var i = 0; i < sections.length; i++) var section = sections[i]; var id = section.id; var h1 = section.querySelectorAll('h1')[0]; var text = h1.innerHTML; h1.innerHTML = ""+ text +""+" "+ id +" ";
jQuery-versionen
Och här är en jQuery-version, som i huvudsak uppnår samma sak:
$ this id = $ (this) .attr ('id'); var h1 = $ (detta) .find ('h1'). första () ; var t = h1.text (); h1.html (""+ t +""); h1.append (" # "+ id +" "););
Båda dessa ger samma resultat. Vi letar efter alla avsnitten av en viss artikel, och för var och en finner vi id av den delen. Då bygger vi en länk som pekar på det id och lägg till den till rubrik element. Vi lägger också in den befintliga texten i en spänn för mer flexibel styling.
Talar om styling ...
Låt oss sedan tillämpa några grundläggande CSS för att ge en gömd och avslöjande effekt:
Dessa regler fastställde först några grundläggande stilar; font, Färg, artikel bredd och så vidare. Då säger vi att en (som vi bifogade tidigare via JavaScript) kommer att ha övergångar applicerade på den och kommer att ha en opacitet av 0 som standard. Först när vi svävar över det ökar dess opacitet till 1, vilket ger oss blekningen i effekt.
Och det är allt! Nu har vi en relativt enkel implementering av denna teknik i aktion:
Slutsats
Vi har just byggt en väldigt användbar förbättring för innehållsrika webbsidor! Fallbacken är också graciös: om JavaScript är inaktiverat visas inte länkarna helt enkelt - och om en hash-tagg är närvarande i slutet av webbadressen ignoreras den.
Vår fade-in-effekt är ett enkelt sätt att presentera länken, så hur kan du förbättra det? Vilka typer av animationer kan du ansöka om? Skulle du placera länken på samma sätt? Vi ser fram emot att höra dina idéer (och se upp för gemenskapsprojektet som vi snart kommer att lansera på detta ämne!)
Accentsconagua
Share
En lista bortsett - här ser du sektionslänken och "fragmentidentifieraren" (hash taggen ...) i webbadressen
Hjälpdokumentationen på GitHub är en annan plats där du hittar dynamiska sektionslänkar