verschiedene Inhalte in Div laden
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
ausfahren
button
code
ding
einfahren
eins
frage
funktion
geschrieben code
inhalt
krieg
nutzen
probier
problem
richtig positionieren
stimmen
verschwinden
versuchen
vier
vorhandene ersetzen
-
Hi
ich habe ein Div und darüber 5 Buttons.
Ich möchte jetzt dass wenn ich auf Button1 klicke unter den Buttons ein weiteres Div ausgefahren wird und in diesem Div dann der Inhalt 1 ist. In inhalt 1 ist auch ein Button 'OK' enthalten. wenn man auf diesen klickt soll das ganze wieder eingefahren werden.
Das ganze hab ich schon hingekriegt doch leider kann ich nach einmal aus und einfahren keine anderen Funktionen Nutzen (also wenn ich auf Button3 klicke fährt es aus und dann auf ok fährt es ein. Jetzt will ich auf eins drücken doch da passiert garnix!)
Google mich scho halb tod! Hoffe ihr wisst was ich da machen kann!
Vielleicht mit AJAX oder so kenn ich mich aber leider garnicht mit aus. PHP kommt auch nur bedingt in Frage, da ich die Seite ja nicht neu laden Will! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
nimm javascript, ist ganz einfach damit
<html> <head> <script type="text/javascript"> function makevisible(which) { document.getElementById(which).style.display = "block"; } function makeinvisible(which) { document.getElementById(which).style.display = "none"; } </script> </head> <body> <input type="button" value="text1" onclick="makevisible('textfeld1')"> <input type="button" value="text2" onclick="makevisible('textfeld2')"> <input type="button" value="text3" onclick="makevisible('textfeld3')"> <input type="button" value="text4" onclick="makevisible('textfeld4')"> <input type="button" value="text5" onclick="makevisible('textfeld5')"> <p> <div id="textfeld1" style="display:none">ddd<input type="button" value="invisible" onclick="makeinvisible('textfeld1')"></div> <div id="textfeld2" style="display:none">ddd<input type="button" value="invisible" onclick="makeinvisible('textfeld2')"></div> <div id="textfeld3" style="display:none">ddd<input type="button" value="invisible" onclick="makeinvisible('textfeld3')"></div> <div id="textfeld4" style="display:none">ddd<input type="button" value="invisible" onclick="makeinvisible('textfeld4')"></div> <div id="textfeld5" style="display:none">ddd<input type="button" value="invisible" onclick="makeinvisible('textfeld5')"></div> </body> </html>
Habs korrigiert und es laueft.
Du musst die divs natuerlich auch noch per css richtig positionieren.
Beitrag zuletzt geändert: 15.12.2009 22:03:51 von minialanguageschool -
Vielen Dank schonmal! Es klappt aus allerdings soll wenn ich auf einen anderen Button Klicke das div nicht hinzugefügt werden sondern das vorhandene ersetzen also immer nur 1 div gleichzeitig sichtbar.
ich hab das so geschrieben:
<html> <head> <title>OnlineEditor</title> <script type="text/javascript"> function makevisible(which) { document.getElementById(which).style.display = "block"; } function makeinvisible(which) { document.getElementById(which).style.display = "none"; } </script> </head> <body> <input type="button" value="text1" onclick="makevisible('textfeld1')"> <input type="button" value="text2" onclick="makevisible('textfeld2')"> <input type="button" value="text3" onclick="makevisible('textfeld3')"> <input type="button" value="text4" onclick="makevisible('textfeld4')"> <input type="button" value="text5" onclick="makevisible('textfeld5')"> <p> <div id="textfeld1" style="width:100px;height:100px;background-color:black;display:none"><input type="button" value="invisible" onclick="makevisible('textfeld1')" ></div> <div id="textfeld2" style="width:100px;height:100px;background-color:black;display:none"><input type="button" value="invisible" onclick="makevisible('textfeld2')" ></div> <div id="textfeld3" style="width:100px;height:100px;background-color:black;display:none"><input type="button" value="invisible" onclick="makevisible('textfeld3')" ></div> <div id="textfeld4" style="width:100px;height:100px;background-color:black;display:none"><input type="button" value="invisible" onclick="makevisible('textfeld4')" ></div> <div id="textfeld5" style="width:100px;height:100px;background-color:black;display:none"><input type="button" value="invisible" onclick="makevisible('textfeld5')" ></div> </body> </html> war das richtig oder falsch?? Was mein anderes Problem betrifft soll das Dif nicht nur erscheinen (allerdings besser als nix) sondern auch noch ausklappen. Hoffe ich verlange da nicht zu viel! MFG -
ist jetzt vielleicht nicht der schoenste code, aber ich bin zu muede fuer was besseres :D
<html> <head> <script type="text/javascript"> function makevisible(which) { document.getElementById("textfeld1").style.display = "none"; document.getElementById("textfeld2").style.display = "none"; document.getElementById("textfeld3").style.display = "none"; document.getElementById("textfeld4").style.display = "none"; document.getElementById("textfeld5").style.display = "none"; document.getElementById(which).style.display = "block"; } function makeinvisible(which) { document.getElementById(which).style.display = "none"; } </script> </head> <body> <input type="button" value="text1" onclick="makevisible('textfeld1')"> <input type="button" value="text2" onclick="makevisible('textfeld2')"> <input type="button" value="text3" onclick="makevisible('textfeld3')"> <input type="button" value="text4" onclick="makevisible('textfeld4')"> <input type="button" value="text5" onclick="makevisible('textfeld5')"> <p> <div id="textfeld1" style="display:none">1<input type="button" value="invisible" onclick="makeinvisible('textfeld1')"></div> <div id="textfeld2" style="display:none">2<input type="button" value="invisible" onclick="makeinvisible('textfeld2')"></div> <div id="textfeld3" style="display:none">3<input type="button" value="invisible" onclick="makeinvisible('textfeld3')"></div> <div id="textfeld4" style="display:none">4<input type="button" value="invisible" onclick="makeinvisible('textfeld4')"></div> <div id="textfeld5" style="display:none">5<input type="button" value="invisible" onclick="makeinvisible('textfeld5')"></div> </body> </html>
Beitrag zuletzt geändert: 15.12.2009 22:09:24 von minialanguageschool -
Ja das klapptso eig ganz gut. wenn ich aber versuche die dinger ein und ausfahren zu lassen krieg ich sie zwar rein aber nicht raus und dann geht nix mehr!
Hast du ne idee wie ich die rein und rausfahren lassen kann??
P.S. das verschwinden klappt iwie net aber der Code müsste stimmen oder überseh ich da was??
MFG -
Probier es doch mal mit etwas wie
Korrigiert und korrekt arbeitend ;)<html> <head> <title></title> <script type="text/javascript"> function show(wich) { var vonDiv = document.getElementById(wich); var zuDiv = document.getElementById("ziel"); var buttonDiv = document.getElementById("button"); zuDiv.style.visibility = "visible"; zuDiv.innerHTML = vonDiv.innerHTML + buttonDiv.innerHTML; } function hide() { var zuDiv = document.getElementById("ziel"); zuDiv.innerHTML = ""; zuDiv.style.visibility = "hidden"; } </script> </head> <body> <div> <a id="button1" href="javascript:show('text1');">Klick mich Eins!</a> <a id="button2" href="javascript:show('text2');">Klick mich Zwei!</a> <a id="button3" href="javascript:show('text3');">Klick mich Drei!</a> <a id="button4" href="javascript:show('text4');">Klick mich Vier!</a> <a id="button5" href="javascript:show('text5');">Klick mich Fuenf!</a> </div> <div> <div id="text1" style="display:none;">Text1</div> <div id="text2" style="display:none;">Text2</div> <div id="text3" style="display:none;">Text3</div> <div id="text4" style="display:none;">Text4</div> <div id="text5" style="display:none;">Text5</div> <div id="button" style="display:none;"><a href="javascript:hide();" style="display:block;">Schlieszen!</a></div> <div id="ziel" style="background:#FDD; visibility: hidden; padding:5px; margin:5px; border:solid 1px #000:"> hier soll text hin! </div> </div> </body> </html>
Beitrag zuletzt geändert: 15.12.2009 22:49:55 von nerdinator -
Ich versteh grade dein Problem nicht so ganz, was soll nicht funzen? Habs bei mir auf 3.5 FF und 6.0 IE getestet und alle Buttons hatten volle Funktionalitaet.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
