So erweitern und reduzieren Sie Text in HTML

HTML 5 verspricht reichhaltige interaktive Websites. Zurzeit unterscheiden sich Browser jedoch in der Funktionsimplementierung, und in vielen Unternehmen wurden noch keine mit dem neuen Standard kompatiblen Browser bereitgestellt. Trotzdem kann eine umfassende Interaktion mit aktuellen Browsern implementiert werden. Wenn Sie über ein wenig Erfahrung mit JavaScript verfügen, versuchen Sie, die innerHTML-Eigenschaft des div-Tags zu verwenden, um Konturen zu erweitern und zu kontrahieren und Ihrer Website interaktive Hilfe hinzuzufügen.

Erstellen Sie ein neues Projekt

Öffnen Sie Ihr bevorzugtes Webentwicklungstool und erstellen Sie eine neue Website. Die Visual Studio-Tools von Microsoft werden hier verwendet, da die WebDev-Version kostenlos heruntergeladen werden kann und einen integrierten Webserver enthält.

Erstellen Sie eine neue HTML-Seite

Erstellen Sie eine neue Seite default.htm. Klicken Sie auf "Projekt", "Element hinzufügen", wählen Sie dann "HTML-Seite" und nennen Sie es "default.htm". Wenn bereits eine default.aspx-Datei vorhanden ist, löschen Sie sie. Wechseln Sie zur HTML- oder Markup-Ansicht und fügen Sie nach dem Tag den folgenden Code hinzu.

Beispielseite

Beispielseite

1? Titel 1

2? Titel 2

Das h3-Tag erstellt einen Seitenkopf mit dem Titel „Beispielseite“, gefolgt von zwei Zeilen einer Gliederung. Jede Zeile beginnt mit einer Nummer, einem Fragezeichen und einem Titel. Die Fragezeichen sind von Ankern umgeben ((Tags, die sie in anklickbare Links umwandeln.) Nach jedem Titel haben wir ein leeres div-Tag hinzugefügt, an dem zusätzlicher Text eingefügt werden kann.

Fügen Sie das JavaScript hinzu

Fügen Sie eine JavaScript-Funktion hinzu, die von jedem Fragezeichen-Link wie folgt aktiviert werden kann:

Jeder der Links ruft die JavaScript-Funktion help_click auf, wobei der Div-Dateiname und ein zusätzlicher Text übergeben werden. Die Funktion testet zuerst, ob das div-Tag leer ist (div.innerHTML == ""). Wenn das Tag leer ist, fügt der Code einen Zeilenumbruch hinzu (

), drei Leerzeichen (), gefolgt vom Text. Wenn das div bereits Text enthält, wird das Markup im div-Tag gelöscht.

Testen Sie die neue Seite

Testen Sie den Code. Klicken Sie für Visual Studio auf die Taste "F5". Wenn die Seite angezeigt wird, klicken Sie auf eines der Fragezeichen. Wenn Sie zum ersten Mal auf den Link in Zeile 1 klicken, wird die Gliederung um den Text „Zusätzlicher Text für Titel 1“ erweitert. Wenn der Link zum zweiten Mal angeklickt wird, verschwindet der Text. Mit ein wenig kreativem Code kann dieselbe Technik zum Erstellen von Baumansichten, komplexen Konturen oder zum Anzeigen und Ausblenden von Hilfetext verwendet werden.