• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

Inhalt aufklappen mit JavaScript und html

zoom

zoom

Antonowka
Registriert
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
 
s23

s23

Seidenapfel
Registriert
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'){...
 
zoom

zoom

Antonowka
Registriert
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.
 
s23

s23

Seidenapfel
Registriert
23.11.08
Beiträge
1.333
zoom schrieb:
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.
Zum Vergrößern anklicken....

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 ;)
 
zoom

zoom

Antonowka
Registriert
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>
 
Zuletzt bearbeitet:
s23

s23

Seidenapfel
Registriert
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.
 
zoom

zoom

Antonowka
Registriert
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.
 
s23

s23

Seidenapfel
Registriert
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.
 
zoom

zoom

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

s23

Seidenapfel
Registriert
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 :)
 
  • Like
Reaktionen: zoom
zoom

zoom

Antonowka
Registriert
06.03.06
Beiträge
356
Vielen Dank! Jetzt funktioniert es einwandfrei. :)
 
Chu

Chu

Martini
Registriert
15.06.07
Beiträge
658
Na ich denke da hat sich jemand einiges an Karma verdient im schweiße des Angesichts ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten