1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Inhalt aufklappen mit JavaScript und html

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von zoom, 25.01.09.

  1. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Moin!

    Ich stelle auf einer Seite mehrere Bilder dar. Dazu möchte ich per Klick auf das Bild weitere Informationen zur Verfügung stellen. Ich habe folgenden Code erstellt:
    Code:
    <html>
    <style type="text/css">
    	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
    		display: none;
    	}
    </style>
    </head>
    <script type="text/javascript" language="JavaScript1.2">
    var yes = false;
    function flip(num) 
    { 
    	if (yes)
    	{
    		document.getElementById('x'+num).style.display = 'none';
    		yes = false;
    	}
    	else
    	{
    		document.getElementById('x'+num).style.display = 'block';
    		yes = true;
    	}
    } 
    </script> 
    <body>
    <div>Bild 1</div>
    <a href="javascript: void()" onclick="flip(1)"><img src="bild1.jpg" alt="bild1" /></a>
    <div id="x1">Inhalt zu Bild 1</div><br />
    <div>Bild 2</div>
    <a href="javascript: void()" onclick="flip(2)"><img src="bild2.jpg" alt="bild2" /></a>
    <div id="x2">Inhalt zu Bild 2</div><br />
    <div>Bild 3</div>
    <a  href="javascript: void()" onclick="flip(3)"><img src="bild3.jpg" alt="bild3" /></a>
    <div id="x3">Inhalt zu Bild 3</div><br />
    <div>Bild 4</div>
    <a  href="javascript: void()" onclick="flip(4)"><img src="bild4.jpg" alt="bild4" /></a>
    <div id="x4">Inhalt zu Bild 4</div><br />
    <div>Bild 5</div>
    <a href="javascript: void()" onclick="flip(5)"><img src="bild5.jpg" alt="bild5" /></a>
    <div id="x5">Inhalt zu Bild 5</div><br />
    <div>Bild 6</div>
    <a href="javascript: void()" onclick="flip(6)"><img src="bild6.jpg" alt="bild6" /></a>
    <div id="x6">Inhalt zu Bild 6</div><br />
    <div>Bild 7</div>
    <a href="javascript: void()" onclick="flip(7)"><img src="bild7.jpg" alt="bild7" /></a>
    <div id="x7">Inhalt zu Bild 7</div>
    </body>
    </html>
    Nun zu dem Problem, was sich dabei für mich ergibt. Wenn man auf Bild 1 klickt, dann öffnen sich darunter wie gewünscht die Informationen. Die Variable yes ist nun allerdings true. Das bedeutet, dass weitere Information von zB Bild 2 nicht mit einem Klick geöffnet werden können. Dazu muss man die Variable erst wieder in den false-Zustand bringen.
    Wie muss ich nun den Code verändern. Ich möchte, dass alle Information unabhängig voneinander geschlossen und geöffnet (und umgekehrt) werden können. Ich habe irgendwie ein keine Idee. Kann mir jemand helfen?

    Gruß zoom
     
  2. s23

    s23 Seidenapfel

    Dabei seit:
    23.11.08
    Beiträge:
    1.333
    Indem du nicht eine eigene Abfrage mittels "yes" kreierst, sondern einfach den Status des Elementes abfragst.

    Konkret:
    Code:
    if (document.getElementById('x'+num).style.display = 'none'){...
     
  3. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Sorry, aber das verstehe ich noch nicht ganz. Ich stehe vielleicht auf dem Schlauch...
    Könntest du bitte mal den kompletten Code der Funktion posten? Danke.
     
  4. s23

    s23 Seidenapfel

    Dabei seit:
    23.11.08
    Beiträge:
    1.333
    Da stehst du aber gewaltig auf dem Schlauch, was? Die 5 Zeilen Code jetzt nicht anpassen zu können o_O

    Code:
    <script type="text/javascript" language="JavaScript1.2">
    function wechsel(wert) 
    { 
      if(document.getElementById(wert).style.display = 'none';){
    	document.getElementById(wert).style.display = 'block';
      }else{
            document.getElementById(wert).style.display = 'none';
      }
    }
    </script> 
    
    Dein Aufruf erfolgt nun via:

    Code:
    <a href="javascript:wechsel('x1');"><img src="bild1.jpg" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>
    HTH ;)
     
  5. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Ok, den Sinn der Funktion verstehe ich. Dennoch funktioniert das leider noch nicht. Die Infos werden beim Klick auf das entsprechende Bild leider nicht geöffnet. (Ich habe deinen Quellcode eins zu eins übernommen.) Muss vielleicht am Anfang noch definiert werden, dass das entsprechende div im none-Zustand ist? Oder reicht die Angabe aus den css?

    Edit:
    mein aktueller Code sieht so aus
    Code:
    <html>
    <style type="text/css">
    	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
    		display: none;
    	}
    </style>
    </head>
    <script type="text/javascript" language="JavaScript1.2">
    function wechsel(wert) 
    { 
      if(document.getElementById(wert).style.display = 'none';)
      {
    		document.getElementById(wert).style.display = 'block';
      }
      else
      {
            document.getElementById(wert).style.display = 'none';
      }
    }
    </script>
    <body>
    <div>Bild 1</div>
    <a href="javascript:wechsel('x1');"><img src="bild1.jpg" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>
    <div>Bild 2</div>
    <a href="javascript:wechsel('x2');"><img src="bild2.jpg" alt="bild2" /></a><div id="x2">Inhalt zu Bild 2</div>
    <div>Bild 3</div>
    <a href="javascript:wechsel('x3');"><img src="bild3.jpg" alt="bild3" /></a><div id="x3">Inhalt zu Bild 3</div>
    </body>
    </html>
     
    #5 zoom, 25.01.09
    Zuletzt bearbeitet: 25.01.09
  6. s23

    s23 Seidenapfel

    Dabei seit:
    23.11.08
    Beiträge:
    1.333
    Ja, das Div muss natürlich ein Stil-Attribut bekommen, das auf "none" steht. Das hatte ich vergessen. Dann sollte es gehen.
     
  7. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Dann hilf mir doch bitte nochmal. Ich habe noch nicht so viel Ahnung von JavaScript. Beim Suchen nach style-Attributen für JavaScript bin ich zwar fündig geworden, ich konnte aber noch keine Lösung finden, die nun mein Problem behebt. Wie weise ich den Elementen x1 bis x7 am effektivsten ein display = none zu?
    Code:
    document.getElementById('x1').style.display = 'none';
    Damit funktioniert es leider nicht. Außerdem wäre das ja nur das erste Element betreffend.
     
  8. s23

    s23 Seidenapfel

    Dabei seit:
    23.11.08
    Beiträge:
    1.333
    Der Javascript-Quelltext muss nicht geändert werden. Du musst dein HTML-Quelltext wie folgt ändern:

    Code:
    <div id="x3" style="display:none;">Inhalt zu Bild 3</div>
    
    Und das für jedes DIV-Element, welches du ansprechen willst.
     
  9. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    In der css-Angabe habe ich das doch angegeben. (Siehe ersten Quellcode) Es funktioniert so aber nicht...
     
  10. s23

    s23 Seidenapfel

    Dabei seit:
    23.11.08
    Beiträge:
    1.333
    Ja in der Tat, es sollte auch "document.getElementsByTagName" heißen im Javascript.

    Code:
    <html>
    <style type="text/css">
    	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
    		display: none;
    	}
    </style>
    </head>
    <script type="text/javascript">
    function wechsel(wert) 
    { 
      
      obj = document.getElementsByTagName("div");
    		    if (obj[wert].style.display == 'block'){
    		        obj[wert].style.display = 'none';
    		    } else {
    		        obj[wert].style.display = 'block';
    		    }
    }
    </script>
    <body>
    <div>Bild 1</div>
    <a href="javascript:wechsel('x1');"><img src="bild1.jpg" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>
    <div>Bild 2</div>
    <a href="javascript:wechsel('x2');"><img src="bild2.jpg" alt="bild2" /></a><div id="x2">Inhalt zu Bild 2</div>
    <div>Bild 3</div>
    <a href="javascript:wechsel('x3');"><img src="bild3.jpg" alt="bild3" /></a><div id="x3">Inhalt zu Bild 3</div>
    </body>
    </html>
    HTH :)
     
    zoom gefällt das.
  11. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Vielen Dank! Jetzt funktioniert es einwandfrei. :)
     
  12. Chu

    Chu Martini

    Dabei seit:
    15.06.07
    Beiträge:
    659
    Na ich denke da hat sich jemand einiges an Karma verdient im schweiße des Angesichts ;)
     

Diese Seite empfehlen