Så här utvidgar du och döljer text i HTML

HTML 5 lovar rika interaktiva webbplatser, men vid denna tidpunkt varierar webbläsare i funktionen implementeringar och många företag har ännu inte distribuerat webbläsare kompatibla med den nya standarden. Trots detta kan rik interaktion implementeras med nuvarande webbläsare. För dem med en liten JavaScript-upplevelse, försök att använda div-taggens innerHTML-egenskap för att expandera och kontrakta konturer och lägga till interaktiv hjälp till din webbplats.

Skapa ett nytt projekt

Öppna ditt favoritverktyg för webbutveckling och skapa en ny webbplats. Microsofts Visual Studio-verktyg kommer att användas här eftersom WebDev-versionen kan laddas ner gratis och innehåller en inbyggd webbserver.

Skapa en ny HTML-sida

Skapa en ny sida default.htm. Klicka på "Project", "Add Item" och välj sedan "HTML Page" och namnge det default.htm. Om det redan finns en default.aspx-fil, radera den. Byt till HTML- eller Markup-vy och lägg till följande kod efter taggen.

Exempelsida

1? Titel 1

2? Avdelning 2

H3-taggen skapar en sidhuvud med namnet "Sample Page", följt av två rader av en skiss. Varje rad börjar med ett nummer, ett frågetecken och en titel. Frågetecknen är omgivna av ankare ((taggar som gör dem till klickbara länkar. Efter varje titel har vi lagt till en tom div-tagg där ytterligare text kan infogas.

Lägg till JavaScript

Lägg till en JavaScript-funktion som kan aktiveras av var och en av frågeteckenlänkarna enligt följande:

Var och en av länkarna kallar JavaScript-funktionen help_click, passerar div tagnam och ytterligare text. Funktionen testar först om div-taggen är tom (div.innerHTML == ""). Om taggen är tom lägger koden en radbrytning (

), tre tomma tecken () följt av texten. Om div redan innehåller text, rensas markeringen inuti div-taggen.

Testa den nya sidan

Testa koden. För Visual Studio, klicka på "F5" -knappen. När sidan visas klickar du på någon av frågorna. Första gången länken i rad 1 blir klickad expanderar konturen till att inkludera texten "Ytterligare text för Titel 1". Andra gången länken blir klickad, går texten bort. Med en liten kreativ kod kan samma teknik användas för att skapa trädvyer, komplexa konturer eller att visa och dölja hjälptext.