ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

Mit Javascript div Ebenen einblenden oder verstecken

Javascript hilft Ihnen dynamische HTML Inhalte auf Ihrer Seite zu gestalten. Dynamisch bedeutet, dass die bereits durch die Seite geladenen HTML Elemente nachträglich frei manipuliert werden können, ohne dass die Seite neu geladen werden muss.

Unter anderem ist es meist wichtig, dass

Ebenen eingeblendet und dann wieder ausgeblendet werden können. Dabei können Sie den Inhalt, den Sie belegen nach unten oder oben drücken oder absolut auf der Seite eingeblendet werden.

Manipulierung von

Elemente - Ein- und Ausblenden von Ebenen

Stellen Sie sich vor, dass Sie einen langen Text haben, der viel zu viel Platz auf der Seite nimmt und Sie gerne den Fokus des Besuchers woanders haben wollen. Dann lohnt es sich den Text in eine

Ebene zu platzieren, die dynamisch ein- oder ausgeblendet werden kann. Betrachten wir folgendes Beispiel:
<div id="GrosserText">Text zum verstecken und zeigen</div>

Wir haben nun eine id Eigenschaft der Ebene verpasst, damit wir sie mit Javascript referenzieren können. Nun können wir uns einen Button drüber oder drunter vorstellen, der das Einblenden auslöst:

<img src="/images/Toggle.jpg" onclick="document.getElementById('GrosserText').style.display='block';" alt="" border="" />

Sie können auch einen Button zum Ausblenden positionieren:

<img src="/images/Toggle.jpg" onclick="document.getElementById('GrosserText').style.display='none';" alt="" border="" />

Anmerkungen

  • Sie können auch mit einem Textlink die Ein- und Ausblendung antriggern
  • Sie haben die Freiheit vor dem Laden die Div Ebene ausgeblendet oder eingeblendet zu halten
  • Sie können mit dem selben Button nach jedem Klick ein- und dann ausblenden, in dem Sie die Funktion so einsetzen:

    <img src="/images/Toggle.jpg" onclick="document.getElementById('GrosserText').style.display=document.getElementById('GrosserText').style.display=='block' ? 'none' : 'block';" alt="" border="" />



    Dies bedeutet - wenn die div Ebene gerade versteckt ist, bitte zeigen, wenn nicht dann bitte ausblenden.

  • style.display='block' löst die Ebene als Blockelement aus, das heißt - alles was an ihrer Stelle war wird zu Lasten der Ebene verschoben

 

Es gibt viele weiteren Möglichkeiten div Ebenen zu manipulieren und zu verstecken.
Nehmen Sie gerne Kontakt mit uns auf, falls Sie nicht weiter kommen.

 

û