Not logged in. · Lost password · Register
Forum: Webdesign › Tutorials RSS
[JavaScript] Ein und ausblenden von Inhalten
Avatar
Janek (Administrator) 2006-08-05, 11:54 #1
User title: Admin
Member since Aug 2006 · 125 posts · Location: Potsdam
Group memberships: Administratoren, Cehmes-Entwickler, Mitglieder
Show profile · Link to this post
Subject: [JavaScript] Ein und ausblenden von Inhalten
Originalversion von Mr. FOODS

Moinzen Leude!
Ich wollte jetzt ma ebend kurz eine "Technik" bekannt geben, mit der man mit JavaScript Inhalte Ein- und Ausblenden kann.

Fangen wir mal an. ;)

Logischerweise (oder auch nicht :-/ ) erstellen wir erst eine neue HTML Datei.

1. Neues HTML Dokument erstellen....
  3. <title>Neues Dokument</title>
  4. </head>
  6.  
  7. </body>
  8. </html>

Das is ja nix was wir im moment haben.
Deshalb werden wir jetzt was machen ^^

Wir werden eine JavaScript funktion erstellen mit der wir das Ein- und Ausblenden umschalten und so.

2. Funktion erstellen....
  1. function ChangeDisplay(id_)
  2. {
  3.  obj = document.getElementById(id_); // Element auswählen
  4.  if(obj.style.display=="") // Falls das Element Sichtbar ist...
  5.  {
  6.   obj.style.display="none"; // ... Ausblenden
  7.  }
  8.  else
  9.  {
  10.   obj.style.display="block"; // ...ansonsten Einblenden
  11.  }
  12. }

Hier mal eine kurze Erkährung:
function gibt an das eine Funktion erstellt wird.
Das ChangeDisplay ist der Name der Funktion.
id_ ist das Argument für die Funktion. (man kann auch mehrere machen, was man bei dieser funktion aber nicht braucht)

Der Rest erkärt sich eigentlich durch den Kommentaren selber :-/
Ansonsten könnt ihr mir ne PN schicken.

Nagut!
Etwas erklär ich des:
Als erstes wird eine Variable gesetzt die wir "obj" nennen (Der wert ist das Element "id_"): (muss net umbedingt aber wir sind halt faul und wollen net viel Code kotn ;) )
obj = document.getElementById(id_); // Element auswählen

Nun Fragen wir aber im welchem Zustand das Element ist. (ob Display \'normal\' is)
if(obj.style.display=="") // Falls das Element Sichtbar ist...

Nun geben wir der Eigenschaft "display" vom Element "obj" den Wert "none" falls die Eigenschaft "display" \'normal\' is.
{
 obj.style.display="none"; // ... Ausblenden
}

Ansonsten...
else
{
 obj.style.display=""; // ...ansonsten Einblenden
}

Ich denke das reicht für ne kurze Erklärung.
Bein kein großer Erklär0r ;)


Nun müssen wir die Funktion nurnoch in das HTML Dokument Einbinden.


3. Funktion ins HTML Dokument einbinden....
  3. <title>Neues Dokument</title>
  4. <script type="text/javascript">
  5. function ChangeDisplay(id_)
  6. {
  7.  obj = document.getElementById(id_); // Element auswählen
  8.  if(obj.style.display=="") // Falls das Element Sichtbar ist...
  9.  {
  10.   obj.style.display="none"; // ... Ausblenden
  11.  }
  12.  else
  13.  {
  14.   obj.style.display=""; // ...ansonsten Einblenden
  15.  }
  16. }
  17. </script>
  18. </head>
  20.  
  21. </body>
  22. </html>

So.
Eingebunden.
Nun müssen wir nurnoch ein Element erstellen welches wir ein und ausblenden und ein link mit dem wir die funktion aufrufen.


  3. <title>Neues Dokument</title>
  4. <script type="text/javascript">
  5. function ChangeDisplay(id_)
  6. {
  7.  obj = document.getElementById(id_); // Element auswählen
  8.  if(obj.style.display=="") // Falls das Element Sichtbar ist...
  9.  {
  10.   obj.style.display="none"; // ... Ausblenden
  11.  }
  12.  else
  13.  {
  14.   obj.style.display=""; // ...ansonsten Einblenden
  15.  }
  16. }
  17. </script>
  18. </head>
  20.  
  21.  <a href="javascript:ChangeDisplay(\'inhalt1\')">Ändern</a><br>
  22.  <div id="inhalt1" style="display:none">
  23.   Hallo!<br>
  24.   Ich bin ein Test o.O
  25.  </div>
  26.  
  27. </body>
  28. </html>

Das wars!
Ich hoffe ihr konnte was lernen/verstehen.
Bin kein Großer Tut Schreiber.
Werde es aber irgendwann lernen ;)

Hier ist eine Vorschaudatei für dieses Beispiel etwas weiter oben:
Beispiel



Bedanke mich fürs lesen.
Alles von euch gesehenen "Rechtschreibfehler" sind beabsichtigt und mit einem Copyright versehen ;P

Bitte gebt bescheid, wenn ich mal was übersehen habe ^^
>> PHP4You
>> Against ICQ
This post was edited 3 times, last on 2006-08-15, 20:24 by Janek.
Avatar
llpb 2006-08-11, 18:04 #2
Member since Aug 2006 · 10 posts
Group memberships: Cehmes-Entwickler, Mitglieder
Show profile · Link to this post
.. ne kleine Ergänzung :) :

Um zu definieren, das Inhalte beim Laden schon unsichtbar sind:

<div id="inhalt1" style="display:none">
  Hallo!<br>
  Ich bin ein Test o.O
 </div>
Avatar
Janek (Administrator) 2006-08-11, 18:20 #3
User title: Admin
Member since Aug 2006 · 125 posts · Location: Potsdam
Group memberships: Administratoren, Cehmes-Entwickler, Mitglieder
Show profile · Link to this post
Danke ich baus mal ein ;)

EDIT: okay, habs eingebaut - der Nachteil dabei ist dann aber das nicht-javascript Nutzer keine Möglichkeit bekommen den Text zu sehen. Wenn ihr das benötigt nutzt <noscript> bzw nehmt "style="display:none"" einfach wieder raus :)
>> PHP4You
>> Against ICQ
Shin 2006-08-15, 19:46 #4
Member since Aug 2006 · 9 posts
Group memberships: Cehmes-Entwickler, Mitglieder
Show profile · Link to this post
anstatt
obj.style.display=""; // ...ansonsten Einblenden
würde ich empfehlen
obj.style.display="block"; // ...ansonsten Einblenden

sonst kanns probleme mit manchen elementen geben..
Avatar
Janek (Administrator) 2006-08-15, 20:23 #5
User title: Admin
Member since Aug 2006 · 125 posts · Location: Potsdam
Group memberships: Administratoren, Cehmes-Entwickler, Mitglieder
Show profile · Link to this post
Okay, ich pass es einfach mal an...
>> PHP4You
>> Against ICQ
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please note the verification code from the picture into the text field next to it.
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:

Go to forum
This board is powered by the Unclassified NewsBoard software, 20090606-dev, © 2003-8 by Yves Goergen
Current time: 2012-02-05, 19:22:04 (UTC +01:00)