Per Buttonklick Inhalt ändern HTML/JAVASCRIPT?

... komplette Frage anzeigen

5 Antworten

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

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von bishare
28.06.2016, 17:17

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

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;

Antwort bewerten Vielen Dank für Deine Bewertung

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.

Antwort bewerten Vielen Dank für Deine Bewertung

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>';
}
Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von bishare
29.06.2016, 13:29

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

Schau dir mal die Funktion $.html() an.

Antwort bewerten Vielen Dank für Deine Bewertung