Das Platzieren versteckter Textblöcke verbessert die visuelle Wahrnehmung einer Website-Seite – sie wird genau so in den Browser geladen, wie der Designer sie entworfen hat, unabhängig von der Menge der veröffentlichten Informationen. Außerdem ist es für den Besucher bequemer - auf der Suche nach dem notwendigen Informationsblock muss er nicht das gesamte Array durchsuchen, sondern nur kleine "Spitzen der Eisberge".
Es ist notwendig
Grundkenntnisse in HTML und JavaScript
Anleitung
Schritt 1
Verwenden Sie eine benutzerdefinierte JavaScript-Funktion, um die gewünschten Textblöcke auf einer HTML-Seite auszublenden und anzuzeigen. Eine gemeinsame Funktion für alle Blöcke ist viel bequemer, als jedem von ihnen separat Code hinzuzufügen. Platzieren Sie im Kopfteil des Quellcodes der Seite die öffnenden und schließenden Skript-Tags und erstellen Sie dazwischen eine leere Funktion mit einem Namen, z. B. swap und einem erforderlichen Eingabeparameter id: function swap (id) {}
Schritt 2
Fügen Sie dem Hauptteil der Funktion zwischen den geschweiften Klammern zwei Zeilen JavaScript-Code hinzu. Die erste Zeile sollte den aktuellen Status des Textblocks anzeigen – unabhängig davon, ob seine Sichtbarkeit ein- oder ausgeschaltet ist. Es kann mehrere solcher Blöcke in einem Dokument geben, daher muss jeder seinen eigenen Bezeichner haben - seine Funktion erhält id als einzigen Eingabeparameter. Mit diesem Bezeichner sucht es nach dem erforderlichen Block im Dokument und weist der sDisplay-Variablen den Sichtbarkeits-/Unsichtbarkeitswert (den Zustand der display-Eigenschaft) zu: sDisplay = document.getElementById (id).style.display;
Schritt 3
Die zweite Zeile sollte die Anzeigeeigenschaft des gewünschten Textblocks in das Gegenteil ändern - ausblenden, wenn der Text sichtbar ist, und anzeigen, wenn er ausgeblendet ist. Dies kann mit folgendem Code erfolgen: document.getElementById (id).style.display = sDisplay == 'none'? '': 'keiner';
Schritt 4
Fügen Sie dem Header-Abschnitt das folgende Stylesheet hinzu: a {cursor: pointer} Sie benötigen dies, um den Mauszeiger korrekt anzuzeigen, wenn Sie mit der Maus über ein unvollständiges Link-Tag fahren. Mit Hilfe solcher Links organisieren Sie in der Seitenumschaltung die Sichtbarkeit/Unsichtbarkeit von Textblöcken.
Schritt 5
Platzieren Sie diese Umschaltlinks im Text vor jedem ausgeblendeten Block und fügen Sie in den Blöcken am Ende des Textes einen ähnlichen Link hinzu. Schließen Sie unsichtbaren Text in span-Tags ein, deren Stilattribute Unsichtbarkeit festgelegt haben. Beispiel: Text erweitern +++ Dies ist versteckter Text --- In diesem Beispiel wird durch Klicken auf einen Drei-Plus-Link die obige Funktion des onClick-Ereignisses aufgerufen und die ID des sichtbar zu machenden Blocks übergeben. Und innerhalb des Blocks gibt es einen Link mit drei Minuspunkten mit den gleichen Funktionen - wenn Sie darauf klicken, wird der Text ausgeblendet.
Schritt 6
Erstellen Sie die erforderliche Anzahl von Textblöcken, ähnlich wie im vorherigen Schritt beschrieben, und denken Sie daran, die IDs im id-Attribut des span-Tags und in der Variablen zu ändern, die vom onClick-Ereignis in den beiden Links an die Funktion übergeben wird.
