Per Buttonklick Inhalt ändern HTML/JAVASCRIPT?
Will, dass man zwischen 2 Inhalten über ein Buttonklick wechseln kann und habe recherchiert und rausgefunden, dass es mit funktion() geht, aber wie kann ich komplette div containers umändern? Kann man dann im Header den ganzen Code reinschreiben, oder muss man das extern auf einer anderen Seite machen? Oder geht es auch anders?
5 Antworten
Wo genau sollen die Texte denn herkommen? Aus einer Datenbank, aus einer Datei, von einem Div ins andere?
Na warum nicht gleich diese Infos ;)?
Für soetwas kannst du z.B. wunderbar das Firefox Plugin Firebug nutzen. Wenn du dort mal reinschaust dann wirst du sehen, dass das HTML vom Loginformular per Ajax aus irgend einer Klasse, Funktion oder sonstigen Datei welche das HTML bereitstellt geholt wird.
Am einfachsten kannst du das, wie es auch in deinem Beispiel gemacht wird, mit JSON verwirklichen.
Ich möchte dir jetzt nicht zuviel verraten, damit auch einen Lerneffekt hast :).
Stichworte die du mal nachschlagen solltest: Ajax, Json und wenn du soweit bist und das Formular geholt hast, dann schau dir mal den Tipp von @perhp an.
HTML:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <div id="inhalt"> <button onclick="Inhalt1()">Inhalt 1</button> <button onclick="Inhalt2()">Inhalt 2</button> <br /><h1>Irgendeininhalt</h1> </div> </body> </html>
JavaScript (am besten auch in den Body bereich):
function Inhalt1(){
var Inhalt = document.getElementById('inhalt');
Inhalt.innerHTML = '<button onclick="Inhalt1()">Inhalt1</button>
<button onclick="Inhalt2()">Inhalt2</button><br /><h1>Irgendeininhalt</h1>';
}
function Inhalt2(){
var Inhalt = document.getElementById('inhalt');
Inhalt.innerHTML = '<button onclick="Inhalt1()">Inhalt1</button>
<button onclick="Inhalt2()">Inhalt2</button><br /><h1>Irgendeininhalt 2</h1>';
}
Sorry, ich habe noch nie javascript in html eingebunden. Wo genau muss ich es in den Body Bereich reinschreiben? Muss es dann auch in <script> </script> reingeschrieben werden?
Inwiefern zwischen zwei Inhalten wechseln? Möchtest du zwei Container nebeneinander haben und wenn du in den einen klickst, erscheint Content A und klickt man in den zweiten erscheint Content B?
Hier wäre meine jQuery Lösung:
html Struktur:
div.eins div.inhaltlinks
div.zwei div.inhaltrechts
css:
.inhaltlinks, inhaltrechts {
display: none;
}
jQuery:
$('.eins').click(function(){
$('.inhaltlinks).show();
});
css sagt: Der Inhalt wird nicht dargestellt.
jQuery sagt: Wenn du auf den Cintainer mit der Klasse "eins" klickst, wird der Container mit der Klasse "inhaltlinks" sichtbar und bekommt display: block;
Kopier dein Skript, änder es und leite den Nutzer beim klicken auf den Button auf die zweite Seite, bei der du den div container umgeschrieben hast.
Schau dir mal die Funktion $.html() an.
Die Texte werden vorgeschrieben. Hab es mir so vorgestellt, dass ich 2 divs habe, die sich dann immer beim klicken des buttons wechseln