Top-Themen

Aktuelle Themen (A bis Z)

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, 1752 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
JavaScript
Mit Javascript html Element bewegen
gelöst Frage von deinernstjetztJavaScript2 Kommentare

Hallo, ich habe einen Javascript geschrieben der ein HTML Element bewegt. Er verändert den Abstand zu anderen Elementen mit ...

JavaScript
HTML-Javascript - Auslesen von Formularfeldern
gelöst Frage von internet2107JavaScript1 Kommentar

Ich habe folgendes Problem. Ich habe ein HTML/Javascript Formular vorliegen, in dem in diversen <input> Feldern unter value="" sporadisch ...

JavaScript
Javascript oder HTML nach DOM laden
Frage von chef1568JavaScript1 Kommentar

Hallo, ich habe ein Problem mit dem Seitenaufbau meiner Webseite. Ich möchte 2 Inhalte erst nach Aufbau des DOM´s ...

VB for Applications
Eigener HTML-Code im UserForm
gelöst Frage von 94451VB for Applications5 Kommentare

Hallo, im Internetz habe ich dieses Script gefunden: die Public Variable (emailHT) habe ich hinzugefügt meine Idee war es ...

Neue Wissensbeiträge
Verschlüsselung & Zertifikate

19 Jahre alter Angriff auf TLS funktioniert immer noch

Information von BassFishFox vor 1 StundeVerschlüsselung & Zertifikate

Interessant zu lesen. Der Bleichenbacher-Angriff gilt unter Kryptographen als Klassiker, trotzdem funktioniert er oft noch. Wie wir herausgefunden haben, ...

Windows 10

Windows 10 Fall Creators Update - Neue Funktion Hyper-V Standardswitch kann ggf. Fehler bei Proxy Configs verursachen

Erfahrungsbericht von rzlbrnft vor 12 StundenWindows 102 Kommentare

Hallo Kollegen, Da wir die Gefahr lieben, haben wir bei einigen Usern nun mittlerweile das Creators Update drauf. Einige ...

Sicherheit

TLS-Zertifikat und privater Schlüssel von Microsofts Dynamics 365 geleakt

Information von Penny.Cilin vor 14 StundenSicherheit

Microsoft hat versehentlich das TLS-Zertifikat inklusive dem privaten Schlüssel seiner Business-Anwendung Dynamics 365 geleakt. TLS-Zertifikat und privater Schlüssel von ...

Viren und Trojaner

Deaktivierter Keylogger in HP Notebooks entdeckt

Information von bitcoin vor 1 TagViren und Trojaner3 Kommentare

Ein Grund mehr warum man Vorinstallationen der Hersteller immer blank bügeln sollte Der deaktivierte Keylogger findet sich im vorinstallierten ...

Heiß diskutierte Inhalte
Netzwerkmanagement
Firefox Profieles im Roaming
gelöst Frage von Hendrik2586Netzwerkmanagement17 Kommentare

Hallo liebe Leute. :) Ich hab da ein kleines Problem, welches anscheinend nicht unbekannt ist. Wir nutzen hier in ...

Netzwerkmanagement
NAS über zwei weitere Ethernet Anschlüsse verbinden
gelöst Frage von Sibelius001Netzwerkmanagement16 Kommentare

Sorry - ich bin hier wahrscheinlich als kompetter IT Trottel unterwegs. Aber eventuell kann mir jemand ganz einfach helfen: ...

LAN, WAN, Wireless
Häufig Probleme beim Anmelden in WLAN
Frage von mabue88LAN, WAN, Wireless15 Kommentare

Hallo zusammen, in einem Netzwerk gibt es relativ häufig (1-2 mal pro Woche) Probleme mit der WLAN-Verbindung. Zunächst mal ...

Netzwerkgrundlagen
Hi eine blöde frage. xD
Frage von 132954Netzwerkgrundlagen13 Kommentare

Also: Habe 2012 r2 essentials neuinstalliert, allerdings installiert diese version ja gleich diesen gangen AD kram mit, den hab ...