• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kickstarter - Content mit Menu ändern

K

KonstantinV

Neues Mitglied
Hallo,

ich bin zZt auf der Arbeit und arbeite an einem Web Portal. Ich habe mit Kickstarter soweit den Anfang erstellt und nun suche ich nach einer möglichkeit es so klein wie möglich zu halten d.h. so wenig HTML Dateien wie möglich.

Konkret: Wenn ich auf Menupunkt B klicke verschwindet der Content von A und der von B erscheint (am besten in Form von divs) wie realisiere ich das?


Dankeschön schonmal.


Mit freundlichem Gruß,

Konstantin Vogel

PS: Zurzeit habe ich es in folgendem Format versucht:
HTML: 
<a href="#showA">Menu A</a>
<a href="#showB">Menu B</a>

<div id="showA"> Content A</div>
<div id="showB"> Content B</div>
 
Zuletzt bearbeitet:
Hi,
also wenn du dein Format versuchst, musst du alle divs ausblenden, bis auf das, was gerade angezeigt werden soll natürlich, und dann beim Klick auf den Link eine javascript-Funktion aufrufen, die das alte div aus- und das neue einblendet.
Bsp.:
HTML:
HTML: 
<a href="javascript:show(showB)">Menu A</a> <a href="javascript:show(showA)">Menu B</a>  <div id="showA" class="content"> Content A</div> <div id="showB" class="content"> Content B</div>
CSS:
Code: 
div.content {
display: none;
}

JavaScript:
Code: 
function show(id) {
$(".content").css('display', "none");
$(id).css('display', "block");
}

Der Javascript-Code nutzt JQuery.
Diese Methode ist aber eher unüblich und auch nicht besonders gut. Ich würde dir eher raten den Inhalt der Seite aus einer Datenbank zu lesen, falls das für dich in Frage kommt.

Gruß,
Marco
 
Hi,
ich würde auch lieber PHP und eine Datenbank nutzen, aber falls dir das nicht zusagt geht das auch per JavaScript.
- Die divs per CSS ausblenden
- das div mit dem aktuellen Seiteninhalt einblenden
- beim Klick auf einen Link eine JavaScript-Funktion aufrufen, die das momentane div aus- und das neue einblendet.

Gruß,
Marco
 
Es gibt zwei Ansätze. Entweder per HTTP-Request den Inhalt eines Divs austauschen (Ajax), oder zwei Divs, die beim Klick auf den dazugehörigen Button eingeblendet werden. Siehe unten.

Aber nicht nur copy & pasten, sondern auch lesen und verstehen:

HTML: 
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="box" class="span12">
	<a class="btn btn-mini" data-hide="div-a" href="#">Div A</a>
	<a class="btn btn-mini" data-hide="div-b" href="#">Div B</a>
	
	<div id="div-a" class="hide-me">Ich bin Div A</div>
	<div id="div-b" class="hide-me">Ich bin Div B</div>
</div>
	
<script type="text/javascript">
	$(function() {
		$('.hide-me').hide();
		$('.btn').on('click', function(ev) {
			ev.preventDefault();
			var div = $(this).attr('data-hide');
			$('.hide-me').hide();
			$('#' + div).show();
		});
	});
</script>
</body>
</html>

ps: Ich hasse die Einrückungen im Editor hier.
 
Danke für die Antworten. Ich hab das jetzt erstmal mit Javascript und mithilfe von onclick(function(parameter) und dann display:none bzw block gelöst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben