jonaslevin
Goto Top

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

Content-ID: 201880

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

Ausgedruckt am: 02.11.2024 um 22:11 Uhr

nxclass
nxclass 17.02.2013 aktualisiert um 12:55:21 Uhr
Goto Top
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/
JonasLevin
JonasLevin 18.02.2013 um 14:49:08 Uhr
Goto Top
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.
nxclass
nxclass 18.02.2013 aktualisiert um 22:34:41 Uhr
Goto Top
wenn die Seite aufgerufen wird die "Boxen" noch nicht angezeigt werden
div {
  display: none;
}
.. einfügen bei den CSS Eigenschaften. http://www.w3schools.com/css/default.asp