Dynamisches HTML (DHTML) ermöglicht es Ihnen, auf Ihren Websites ein anwendungsähnliches Erlebnis zu schaffen und die Häufigkeit zu reduzieren, mit der ganze Seiten vollständig geladen werden müssen. Wenn Sie in Anwendungen auf etwas klicken, ändert sich die Anwendung sofort, um diesen bestimmten Inhalt anzuzeigen oder Ihnen Ihre Antwort zu geben.
Im Gegensatz dazu müssen Webseiten typischerweise neu geladen werden oder eine komplett neue Seite muss geladen werden. Dies kann die Benutzererfahrung unzusammenhängender machen. Ihre Kunden müssen warten, bis die erste Seite geladen ist, und dann erneut warten, bis die zweite Seite geladen ist, und so weiter.
Verwendung zur Verbesserung des Zuschauererlebnisses
Die Verwendung von DHTML ist eine der einfachsten Möglichkeiten, diese Erfahrung zu verbessern: div Elemente schalten sich ein und aus, um Inhalte anzuzeigen, wenn sie angefordert werden. EIN div-Element definiert logische Unterteilungen auf Ihrer Webseite. Stellen Sie sich ein Div als einen Kasten vor, der Absätze, Überschriften, Links, Bilder und sogar andere Divs enthalten kann.
Was du brauchen wirst
Um ein div zu erstellen, das ein- und ausgeschaltet werden kann, benötigen Sie Folgendes:
- Ein Link zur Steuerung des Div durch Ein- und Ausschalten beim Anklicken.
- Das Div zum Ein- und Ausblenden.
- CSS um das div versteckt oder sichtbar zu gestalten.
- JavaScript, um die Aktion auszuführen.
Das Controlling-Link
Der kontrollierende Link ist der einfachste Teil. Erstellen Sie einfach einen Link wie zu einer anderen Seite. Verlasse vorerst die href-Attribut leer.
HTML lernen
Platzieren Sie diese an einer beliebigen Stelle auf Ihrer Webseite.
Die Div zum Ein- und Ausblenden
Erstellen Sie das div-Element, das Sie anzeigen und ausblenden möchten. Stellen Sie sicher, dass Ihr Div eine eindeutige ID hat. Im Beispiel lautet die eindeutige ID HTML lernen.
Dies ist die Inhaltsspalte. Es beginnt leer, bis auf diesen Erklärungstext. Wählen Sie in der Navigationsspalte links aus, was Sie lernen möchten. Der Text wird unten angezeigt:
HTML lernen
- Kostenlose HTML-Klasse
- HTML-Tutorial
- Was ist XHTML?
Das CSS zum Ein- und Ausblenden der Div
Erstellen Sie zwei Klassen für Ihr CSS: eine zum Ausblenden des div und die andere zum Anzeigen. Dafür haben Sie zwei Möglichkeiten: Anzeige und Sichtbarkeit.
Display entfernt das div aus dem Seitenfluss und die Sichtbarkeit ändert nur, wie es angezeigt wird. Manche Programmierer bevorzugen Anzeige, aber manchmal Sichtweite macht auch Sinn. Beispielsweise:
.versteckt { Anzeige: keine; }
.unhidden { Anzeige: Block; }
Wenn Sie die Sichtbarkeit verwenden möchten, ändern Sie diese Klassen in:
.hidden { Sichtbarkeit: versteckt; }
.unhidden { Sichtbarkeit: sichtbar; }
Fügen Sie die versteckte Klasse zu Ihrem Div hinzu, sodass sie auf der Seite als ausgeblendet beginnt:
JavaScript, damit es funktioniert
Alles, was dieses Skript tut, ist, sich die aktuelle Klasse auf Ihrem div anzusehen und sie wieder sichtbar zu machen, wenn sie als versteckt markiert ist oder umgekehrt.
Dies sind nur ein paar Zeilen JavaScript. Platziere folgendes im Kopf deines HTML-Dokument (Vor dem.
Was dieses Skript macht, Zeile für Zeile:
Ruft die Funktion auf einblenden, und divID ist die genaue eindeutige ID, die Sie anzeigen oder ausblenden möchten.
Erstellt eine Variable item mit dem Wert Ihrer div.
Führt eine einfache Browserprüfung durch; wenn der Browser dies nicht unterstützt getElementById, dieses Skript funktioniert nicht.
Überprüft die Klasse auf der div. Wenn es versteckt, es ändert sich zu unversteckt. Andernfalls wird es geändert in versteckt.
Schließt die wenn Aussage.
Schließt die Funktion.
Damit das Skript funktioniert, müssen Sie noch etwas tun. Gehen Sie zurück zu Ihrem Link und fügen Sie das Javascript zum href-Attribut hinzu. Stellen Sie sicher, dass Sie in dieser href genau die eindeutige ID verwenden, die Sie Ihrem Div genannt haben:
HTML lernen
Herzliche Glückwünsche! Sie haben jetzt ein div, das angezeigt und ausgeblendet wird, wenn Sie auf einen Link klicken.
Mögliche Probleme, auf die Sie achten sollten
Dieses Skript ist nicht narrensicher. Es gibt einige Situationen, in denen es Probleme für Sie verursachen könnte:
JavaScript nicht aktiviert. Wenn Ihre Leser kein JavaScript haben oder es deaktiviert ist, funktioniert dieses Skript nicht. Die versteckten Divs bleiben verborgen, egal was Ihre Leser tun. Eine Möglichkeit, dies zu beheben, besteht darin, die versteckten Divs in einen Noscript-Bereich zu legen, aber Sie müssen damit herumspielen, damit sie richtig angezeigt werden.
Zu viel Inhalt. Dies kann ein großartiges Werkzeug sein, um Ihren Lesern zu ermöglichen, nur den Inhalt zu sehen, den sie benötigen, aber wenn Sie zu viel in die versteckten Divs einfügen, kann dies das Laden der Seite drastisch beeinflussen. Denken Sie daran, dass der Webbrowser ihn auch dann herunterlädt, wenn der Inhalt nicht angezeigt wird. Achten Sie also darauf, wie viel Inhalt Sie verbergen.
Kunden verstehen nicht. Schließlich sind Kunden möglicherweise nicht daran gewöhnt, auf einen Link zu klicken, der Inhalte ein- oder ausblendet. Spielen Sie mit Symbolen (plus Zeichen und Pfeile funktionieren gut) oder Text, um zu erklären, was mit Ihren Kunden passieren wird. Eine andere Lösung besteht darin, eines der Divs geöffnet zu lassen, während die anderen geschlossen sind. Dies kann Ihren Kunden die Idee vermitteln, damit sie schneller herausfinden können, wie sie den verbleibenden Inhalt öffnen.
So sollten Sie Dynamic HTML immer mit Ihren Kunden testen. Sobald Sie sich sicher sind, dass sie es verstehen und verwenden können, kann dies eine großartige Möglichkeit sein, eine große Menge an Inhalten auf Ihre Webseiten zu bringen, ohne viel sichtbaren Platz einzunehmen.