Dynamisk HTML (DHTML) låter dig skapa en applikationsstil på dina webbplatser, vilket minskar frekvensen att hela sidor måste laddas helt. I applikationer, när du klickar på något, ändras applikationen omedelbart för att visa det specifika innehållet eller för att ge dig ditt svar.
Däremot måste webbsidor vanligtvis laddas om, eller så måste en helt ny sida laddas. Detta kan göra användarupplevelsen mer ojämn. Dina kunder måste vänta på att den första sidan laddas och sedan vänta igen på att den andra sidan ska laddas, och så vidare.
Används för att förbättra tittarupplevelsen
Med DHTML är ett av de enklaste sätten att förbättra den här upplevelsen att ha div element slås på och av för att visa innehåll när det begärs. A div-element definierar logiska indelningar på din webbsida. Tänk på en div som en ruta som kan innehålla stycken, rubriker, länkar, bilder och till och med andra div.
Vad du behöver
För att skapa en div som kan slås på och av behöver du följande:
- En länk för att styra div genom att slå på och av den när du klickar.
- Div att visa och dölja.
- CSS för att utforma div dolda eller synliga.
- JavaScript för att utföra åtgärden.
Den kontrollerande länken
Den kontrollerande länken är den enklaste delen. Skapa bara en länk som du skulle göra till en annan sida. För nu, lämna href-attribut tom.
Lär dig HTML
Placera detta var som helst på din webbsida.
Div att visa och dölja
Skapa div-elementet du vill visa och dölja. Se till att din div har ett unikt ID. I exemplet är det unika id: t lära dig HTML.
Det här är innehållskolumnen. Det börjar tomt förutom denna förklaringstext. Välj vad du vill lära dig i navigeringskolumnen till vänster. Texten kommer att visas nedan:
Lär dig HTML
- Gratis HTML-klass
- HTML-handledning
- Vad är XHTML?
CSS för att visa och dölja Div
Skapa två klasser för din CSS: en för att dölja div och den andra för att visa den. Du har två alternativ för detta: visning och synlighet.
Displayen tar bort div från sidflödet, och synligheten ändrar bara hur den ses. Vissa kodare föredrar visa, men ibland synlighet meningsfullt också. Till exempel:
.hidden {display: none; }
.unhidden {display: block; }
Om du vill använda synlighet ändrar du dessa klasser till:
.hidden {synlighet: dold; }
.unhidden {synlighet: synlig; }
Lägg till den dolda klassen i din div så att den börjar som dold på sidan:
JavaScript för att få det att fungera
Allt detta skript gör är att titta på den aktuella klassuppsättningen på din div och växla den till oskyddad om den är markerad som dold eller vice versa.
Detta är bara några rader av JavaScript. Placera följande i huvudet på din HTML-dokument (Innan.
Vad det här skriptet gör, rad för rad:
Ringer till funktionen ta bortoch divID är det exakta unika ID som du vill visa eller dölja.
Ställer in en variabel item med värdet på din div.
Utför en enkel webbläsarkontroll; om webbläsaren inte stöder getElementById, det här skriptet fungerar inte.
Kontrollerar klassen på div. Om det är dold, det ändrar det till oskyddad. Annars ändras det till dold.
Stänger om påstående.
Stänger funktionen.
För att manuset ska fungera måste du göra en sak till. Gå tillbaka till din länk och lägg till javascript till attributet href. Var noga med att använda det exakta unika id som du namngav din div i det här href:
Lär dig HTML
Grattis! Du har nu en div som visas och döljs när du klickar på en länk.
Möjliga problem att se upp för
Detta manus är inte idiotsäkert. Det finns vissa situationer där det kan orsaka problem för dig:
JavaScript är inte aktiverat. Om dina läsare inte har JavaScript eller om den är avstängd fungerar inte detta skript. De dolda diverna förblir dolda oavsett vad dina läsare gör. Ett sätt att fixa detta är att placera dolda divs i ett noscript-område, men du måste leka med det för att få dem att visas korrekt.
För mycket innehåll. Detta kan vara ett utmärkt verktyg för att låta dina läsare bara se innehållet de behöver, men om du lägger för mycket i de dolda delarna kan det drastiskt påverka hur sidan laddas. Kom ihåg att även om innehållet inte visas hämtar webbläsaren det fortfarande, så använd god mening i hur mycket innehåll du döljer.
Kunder förstår inte. Slutligen kanske kunder inte är vana vid att klicka på en länk som visar eller döljer innehåll. Lek med ikoner (plustecken och pilar fungerar bra) eller text för att förklara vad som kommer att hända med dina kunder. En annan lösning är att lämna en av diverna öppna medan de andra är stängda. Detta kan förmedla idén till dina kunder, så att de snabbare kan ta reda på hur man öppnar det återstående innehållet.
Du bör alltid testa dynamisk HTML så här med dina kunder. När du väl är säker på att de kan förstå och använda det kan det vara ett bra sätt att få en stor mängd innehåll på dina webbsidor utan att ta upp mycket synligt utrymme.