Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

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

Frage Entwicklung HTML

Mitglied: JonasLevin

JonasLevin (Level 1) - Jetzt verbinden

17.02.2013, aktualisiert 10:10 Uhr, 1736 Aufrufe, 3 Kommentare

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:
01.
 
02.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03.
<html xmlns="http://www.w3.org/1999/xhtml"> 
04.
<head> 
05.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
06.
<script type="text/javascript"> 
07.
$(document).ready(function(){ 
08.
  $("button").click(function(){ 
09.
    $("div").slideToggle(); 
10.
  }); 
11.
}); 
12.
</script> 
13.
<style type="text/css"> 
14.
 button 
15.
16.
	border-width: 1px;  
17.
	border-color: #0000FF; 
18.
19.
 div 
20.
21.
	 background-color: #EEEEFF;  
22.
	 margin-top:5px; 
23.
	 border-style: dotted;  
24.
	 border-width: 1px;  
25.
	 text-align: left;  
26.
	 text-indent: 5px; 
27.
	 width:220px; 
28.
29.
</style> 
30.
</head> 
31.
<body> 
32.
<button>10.10.12</button> 
33.
<div> 
34.
...Hier stehen informationen über den 10.10.2012... 
35.
</div> 
36.
 
37.
<button>20.10.12</button> 
38.
<div> 
39.
...Hier stehen informationen über den 20.10.2012... 
40.
</div> 
41.
<p>usw.</p> 
42.
</body> 
43.
</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
Mitglied: nxclass
17.02.2013, aktualisiert um 12:55 Uhr
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:
01.
<button target="div1">...</button> 
02.
<div id="div1"> 
03.
... 
04.
</div> 
05.
... etc
Nun muss beim klick auf einen Button das Ziel ausgelesen werden:
01.
$(document).ready(function(){  
02.
  $("button").click(function(){  
03.
    $( '#'+$(this).attr('target') ).slideToggle();  // ergibt also "#div1" - es wird dann dass Element mit id="div1" angesprochen 
04.
  }); 
05.
}); 
... ungetestet. siehe auch http://api.jquery.com/
Bitte warten ..
Mitglied: JonasLevin
18.02.2013 um 14:49 Uhr
Also ich habe den Code jetzt so abgeändert:
(+ ein paar desing Änderungen die aber belanglos sind)

01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
02.
<html xmlns="http://www.w3.org/1999/xhtml"> 
03.
<head> 
04.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
05.
<script type="text/javascript"> 
06.
$(document).ready(function(){   
07.
  $("button").click(function(){   
08.
    $( '#'+$(this).attr('target') ).slideToggle();  
09.
  });  
10.
});  
11.
</script> 
12.
<style type="text/css"> 
13.
button{background-color: #75EA00; 
14.
border-width:2px; 
15.
border-style: inset; 
16.
border-color: #75EA00; } 
17.
 div 
18.
19.
	 background-color: #EEEEFF;  
20.
	 margin-top:5px; 
21.
	 border-style: outset;  
22.
	 border-width: 3px;  
23.
	 text-align: left;  
24.
	 text-indent: 5px; 
25.
	 width:220px; 
26.
27.
</style> 
28.
</head> 
29.
<body> 
30.
<button target="div1">button1</button> 
31.
<button target="div2">button2</button> 
32.
<button target="div3">button3</button> 
33.
<button target="div4">button4</button> 
34.
<hr /> 
35.
<div id="div1">...1</div> 
36.
<div id="div2">...2</div> 
37.
<div id="div3">...3</div> 
38.
<div id="div4">...4</div> 
39.
 
40.
</body> 
41.
</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.
Bitte warten ..
Mitglied: nxclass
18.02.2013, aktualisiert um 22:34 Uhr
wenn die Seite aufgerufen wird die "Boxen" noch nicht angezeigt werden
01.
div { 
02.
  display: none; 
03.
}
.. einfügen bei den CSS Eigenschaften. http://www.w3schools.com/css/default.asp
Bitte warten ..
Ähnliche Inhalte
Internet Domänen
gelöst Domain Leitet nicht an angegebene IP Weiter - Was kann ich tuen? (18)

Frage von Interception zum Thema Internet Domänen ...

Microsoft Office
VBA Code zum Kopieren von einzelnen Zellen in Excel (3)

Frage von SebastianL zum Thema Microsoft Office ...

VB for Applications
gelöst VBA Code Änderung Access 2010 (6)

Frage von Dr.Cornwallis zum Thema VB for Applications ...

Neue Wissensbeiträge
Tipps & Tricks

Wie Hackt man sich am besten in ein Computernetzwerk ein

(29)

Erfahrungsbericht von Herbrich19 zum Thema Tipps & Tricks ...

Humor (lol)

Bester Vorschlag eines Supporttechnikers ever: APC

(15)

Erfahrungsbericht von DerWoWusste zum Thema Humor (lol) ...

Windows Server

Exchange 2010 Active Directory und Windows Server 2016

(4)

Erfahrungsbericht von Herbrich19 zum Thema Windows Server ...

Heiß diskutierte Inhalte
Internet
gelöst Mitarbeiter surft auf unerwünschter Seite - Wie damit umgehen? (44)

Frage von sabines zum Thema Internet ...

Netzwerke
Wie erstelle ich ein Intranet (19)

Frage von Leonardnet zum Thema Netzwerke ...

LAN, WAN, Wireless
gelöst Eintägige Netzwerkunterbrechung trotz Backupleitung (15)

Frage von iAmbricksta zum Thema LAN, WAN, Wireless ...

Windows Server
Server 2012 R2 - Zugriff Verweigert bei jeglicher Tätigkeit (13)

Frage von DarkLevi zum Thema Windows Server ...