[JavaScript] div einblenden und gleichzeitig anderes ausblenden?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Dragonknight, 22. Januar 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 22. Januar 2011
    div einblenden und gleichzeitig anderes ausblenden?

    Hi,

    habe zwei divs (ids: buch und cd). wenn ich auf nen button klicke soll div1 erscheinen und wenn ich auf nen anderen button klicke soll div1 falls eingeblendet ausgeblendet werden und div2 eingeblendet werden.

    habe leider kaum erfahrung mit javascript. hier mal ein klänglicher versuch bei dem das einblenden klappt, das ausblenden jedoch nicht:

    Code:
    <script type="text/javascript" language="JavaScript"> 
function toggleMe(a){ var e=document.getElementById(a); 
if(!e)return true; 
if(e.style.display=="none"){ e.style.display="block"; } else return true; } 
if(document.getElementById(a)=="buch"){ document.getElementById("cd").style="none";} else {document.getElementById("buch").style="none";}
</script>
     
  3. 22. Januar 2011
    AW: div einblenden und gleichzeitig anderes ausblenden?

    HTML:
    <script type="text/javascript" language="JavaScript"> 
// <!CDATA[[
 function toggleMe(id)
 {
 var e = document.getElementById(id);
 if(!e) return;
 
 e.style.display = (e.style.display == "none") ? "block" : "none";
 
 var hide = document.getElementById((id == "buch") ? "cd" : "buch");
 if(!hide) return;
 
 hide.style.display = "none";
 }
// ]]>
</script>
     
  4. 22. Januar 2011
    AW: div einblenden und gleichzeitig anderes ausblenden?

    läuft perfekt, vielen dank :]

    nochmal für mein verständnis: wofür steht das hier: "if(!e) return;" was returne ich denn da? und wofür steht das "!e"?
     
  5. 22. Januar 2011
    AW: div einblenden und gleichzeitig anderes ausblenden?

    Es wird einfach nichts zurückgegeben...
    Damit wird aber die Funktion abgebrochen insofern e nicht gesetzt ist, sprich wenn es kein Element mit der übergebenen ID gibt..
     
  6. 22. Januar 2011
    AW: div einblenden und gleichzeitig anderes ausblenden?

    ahhh macht sinn, danke :]
     
  7. 22. Januar 2011
    AW: div einblenden und gleichzeitig anderes ausblenden?

    so, nochmal verbessert und mit kommentaren:

    HTML:
    <script type="text/javascript" language="JavaScript"> 
// <![CDATA[
 function toggleMe(id)
 {
 var e = document.getElementById(id);
 
 // prüfen ob element mit der id gefunden wurde
 // WENN variable "e" entspricht FALSE: ABBRECHEN
 if(!e) return;
 
 if(e.style.display == "none") {
 // das element war versteckt
 
 var state = "block";
 e.style.display = "block";
 } else {
 // das element war sichtbar
 
 var state = "none";
 e.style.display = "none";
 }
 
 if(id == "buch") {
 // als id wurde "buch" übergeben
 var hide = "cd";
 } else {
 // als id wurde höchstwarscheinlich "cd" übergeben
 var hide = "buch";
 } 
 
 // wir überschreiben die variable mit dem entsprechenden element
 hide = document.getElementById(hide);
 
 // prüfen ob element mit der id gefunden wurde (siehe anfang)
 if(!hide) return;
 
 if(state == "block") {
 // das andere element war versteckt und ist nun sichbar
 // daher verstecken wir dieses element
 hide.style.display = "none";
 } else {
 // das andere element war sichbar
 // daher blenden wir dieses element nun ein
 hide.style.display = "block";
 }
 }
// ]]>
</script>
    dieses script macht genau das selbe, ist aber verkürzt:
    HTML:
    <script type="text/javascript">
// <![CDATA[
 function toggleMe(id)
 {
 var e = document.getElementById(id);
 
 if(!e) return;
 
 var state = (e.style.display = (e.style.display == "none") ? "block" : "none"),
 hide = document.getElementById((id == "buch") ? "cd" : "buch");
 
 if(!hide) return;
 
 hide.style.display = (state == "block") ? "none" : "block";
 }
// ]]>
</script>
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.