title image


Smiley Re: Ein- und Ausblenden von Div-Elementen / Problem bei deaktiviertem JS
Danke für das Stichwort "onload". Ich hatte es auch schon im Hinterkopf, hab nun was damit probiert und es hat sogar funktioniert.



Dennoch zuerst eine Ergänzung zu der einen Script-Zeile, von der du sagst, sie würde sich dann ändern. Ich glaube, damit liegst du falsch.



ElementID.style.display = (ElementID.style.display == "none") ? "block" : "none";

Ist das Element ausgeblendet, wird es eingeblendet. Ist das Element eingeblendet, wird es ausgeblendet. Unabhängig davon, ob das Element beim Aufrufen der Seite oder der Funktion ein- oder ausgeblendet ist.



ElementID.style.display = (ElementID.style.display == "block") ? 'none' : "block";

So geschrieben funktioniert das Script meiner Meinung nach (und auch meinem Test nach) exakt gleich (zumindest was die Benutzung und die Darstellung anbelangt - der interne Ablauf ist zwar ein ganz klein wenig anders, verursacht jedoch keinen optisch sichtbaren Unterschied im Browser).



Oder hast du mit der Änderung dieser Zeile etwas anderes beabsichtigt, was ich mir irgendwie entgangen ist ?





Nun zu meinem Lösungsansatz.

Den Div-Elementen ist nun per Default der Attributwert display:block; und nicht mehr display:none; zugewiesen (was gar nicht so ein grosses Problem darstellt, wie ich einst befürchtet hatte). Die Funktion "showelement()" bleibt vollständig unverändert. Jedoch kommt in den Body-Tag ein onload-Befehl, welcher die Funktion "ol_ausblendung()" aufruft. In dieser Funktion werden alle auszublendenden Div-Elemente durchgegangen und nacheinander durch Aufruf der Funktion "showelement()" ausgeblendet.

Es war eine Idee, welche erstaunlicherweise schon beim ersten Ansatz funktioniert hat :-) .



Jedoch versteh ich etwas daran nicht ganz. Vielleicht kann mir das noch wer erklären.

Der onload-Befehl befindet sich im öffnenden Body-Tag. Somit steht er vor den Div-Elementen, welche beim Aurfugen des onload-Befehls doch noch gar nicht eingelesen wurden.

Kann es sein, dass der onload-Befehl erst ausgeführt wird, wenn die ganze Seite in den Browser eingelesen wurde ?





Abschliessend noch das abgeänderte und funktionierende Script:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Element ein- und ausblenden</title>

<script type="text/javascript">

function showelement (PElementID)

{

  var ElementID = document.getElementById(PElementID);

  if (!ElementID) return;

  ElementID.style.display = (ElementID.style.display == "none") ? "block" : "none";

}



function ol_ausblendung ()

{

  for (i=1; i<=3; i++)

    showelement('div'+i);

}

</script>

</head>

<body onload="ol_ausblendung()">



<a href="javascript:showelement('div1')">Div1 ein- und ausblenden</a><br />

<div id="div1" style="border:#FF0000 3px solid; width:300px; display:block;">

  Div1<br />

  Textzeile 2<br />

  Textzeile 3

</div>



<a href="javascript:showelement('div2')">Div2 ein- und ausblenden</a><br />

<div id="div2" style="border:#00FF00 3px solid; width:300px; display:block;">

  Div2<br />

  Textzeile 5<br />

  Textzeile 6

</div>



<a href="javascript:showelement('div3')">Div3 ein- und ausblenden</a><br />

<div id="div3" style="border:#0000FF 3px solid; width:300px; display:block;">

  Div3<br />

  Textzeile 8<br />

  Textzeile 9

</div>



</body>

</html>



Bemerkungen, weitere Ideen und Anreize werden gerne entgegengenommen :-) .
-~+~ DarkScar ~+~-


geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: