Per Buttonklick Inhalt ändern HTML/JAVASCRIPT?

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Wo genau sollen die Texte denn herkommen? Aus einer Datenbank, aus einer Datei, von einem Div ins andere?

Die Texte werden vorgeschrieben. Hab es mir so vorgestellt, dass ich 2 divs habe, die sich dann immer beim klicken des buttons wechseln

0
@bishare

Sorry, irgendwie verstehe ich es immernoch nicht ganz. Möchtest du die Texte in die Divs schreiben und diese dann jeweils tauschen? Was meinst du mit die Texte werden vorgeschrieben? Wenn nicht wie in Frage 1, wo genau werden die Texte denn gespeichert?

1
@sudorc

Will es so machen, wie hier auf gutefrage.net, mit dem "Einloggen" und "Registrieren". Wenn man auf Einloggen klickt, kommt die Vorlage für das Einloggen und wenn ich auf Registrieren klicke, kommt die Vorlage für das Registrieren.

0
@bishare

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.

0

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?

0

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;

Was möchtest Du wissen?