Habe einen html und JavaScript code weiß jetzt aber nicht weiter.

Der Code ist aus dem Internet. Und weiß bei diesem Code nicht wie ich den so "einstellen" kann das er die "Info Box" erst anzeigt wen man auf den Button klickt.

Hallo,
Ich habe diesen Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){
  $("button").click(function(){  
    $("div").slideToggle();  
  });
});
</script>
<style type="text/css">  
 button
 {
	border-width: 1px; 
	border-color: #0000FF;
 }
 div
 {
	 background-color: #EEEEFF; 
	 margin-top:5px;
	 border-style: dotted; 
	 border-width: 1px; 
	 text-align: left; 
	 text-indent: 5px;
	 width:220px;
 }
</style>
</head>
<body>
<button>10.10.12</button>
<div>
...Hier stehen informationen über den 10.10.2012...
</div>

<button>20.10.12</button>
<div>
...Hier stehen informationen über den 20.10.2012...
</div>
<p>usw.</p>
</body>
</html>

Ich hoffe hier kann irgendwer mehr mit Anfängen als ich. Ich hätte nämlich Gerne das diese "Box" die verschwindet wenn man auf den Hütten drückt bzw. Erscheint beim Seitenangriff noch nicht angezeigt wird sondern erst wen der Button gedrückt wird.

Danke schon mal für eure Hilfe
JonasLevin

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 201880

Url: https://administrator.de/contentid/201880

Ausgedruckt am: 04.11.2024 um 17:11 Uhr

3 Kommentare

Neuester Kommentar

Mahlzeit,

$("button").click() - ALLE <button> Elemente erhalten damit ein onClick Event
$("div").slideToggle() - wenn ein <button> Element angeklickt wurde werden ALLE <div> Elemente ein- oder ausgeblendet

Es fehlt also erst mal eine eindeutige ID der div Elemente:
Dann muss jedem button ein div zugeordnet werden:

<button target="div1">...</button>  
<div id="div1">  
...
</div>
... etc

Nun muss beim klick auf einen Button das Ziel ausgelesen werden:

$(document).ready(function(){ 
  $("button").click(function(){   
    $( '#'+$(this).attr('target') ).slideToggle();  // ergibt also "#div1" - es wird dann dass Element mit id="div1" angesprochen  
  });
}); 

... ungetestet. siehe auch http://api.jquery.com/

Also ich habe den Code jetzt so abgeändert:
(+ ein paar desing Änderungen die aber belanglos sind)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){    
    $( '#'+$(this).attr('target') ).slideToggle();   
  }); 
}); 
</script>
<style type="text/css">  
button{background-color: #75EA00;
border-width:2px;
border-style: inset;
border-color: #75EA00; }
 div
 {
	 background-color: #EEEEFF; 
	 margin-top:5px;
	 border-style: outset; 
	 border-width: 3px; 
	 text-align: left; 
	 text-indent: 5px;
	 width:220px;
 }
</style>
</head>
<body>
<button target="div1">button1</button>  
<button target="div2">button2</button>  
<button target="div3">button3</button>  
<button target="div4">button4</button>  
<hr />
<div id="div1">...1</div>  
<div id="div2">...2</div>  
<div id="div3">...3</div>  
<div id="div4">...4</div>  

</body>
</html>

Aber meine frage wurde damit leider noch nicht ganz beantwortet. Weil ich hatte die Überlegung
Dass wenn die Seite aufgerufen wird die "Boxen" noch nicht angezeigt werden sondern erst dann wen der entsprechende Button gedrückt wurde/wird.
Danke aber für die Antwort.