ComputerBase Menü
Aktuelles

JavaScript [jquery] Verschiedene Inhalte per Button anzeigen

MetalForLive

MetalForLive

Admiral
Registriert
Sep. 2011
Beiträge
8.113
Hi,

Bin hier echt am verzweifel, ich habe garkein Plan von jquery und habe mir jetzt mal ein paar Sachen ergoogled nähmlich wie man Content versteckt und wieder Zeigt.
Allerdings will ich in einem Menü mehrere Buttons haben z.B. Content1, Content 2, Content3 usw. und dann soll wenn ich auf Content1 drücke eben Inhalt 1 erscheinen und wenn ich auf Content2 klicke Inhalt 1 wieder verschwinden und gegen Inhalt 2 ersetzt werden.

Im Prinzip müsste das doch so gehen das ich einfach mehrer Divs mache für die verschiedenen Inhalte und die dann jeweils angezeigt werden wenn man auf den dafür zuständigen Button klickt.

Aber irgendwie tue ich mich da gerade sehr schwer...
Wenn jemand weiter weiß wäre das echt super.

So sieht mein Code momentan aus:

Code: 
<html>
<head>
	<title>Meine Website</title>
	<link rel="stylesheet" type="text/css" href="/css/seite2.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
	  $("#hide").click(function(){
		$("p").hide();
	  });
	  $("#show").click(function(){
		$("p").show();
	  });
	});
	</script>
	<script>
	$(document).on('click', '#menu a.menu1', function() {
        var content = $(this).attr('id');
        if (!content)
            return false;
        $('.content').hide();
        $('.content.'+content).show();
    });
	</script>
</head>
<body>
	<div id="website">
		<div id="header">
			<h1><a href="Seite2.html">Test-Seite</a></h1>
		</div>
			<div id="main">
				<div id="menu">
					<a class="menu1" href="home.html">
					<div>Home</div>
					</a>
					<a class="menu1" href="seite2.html">
					<div>Test-Seite</div>
					</a>
					<a class="menu1" >
					<div><br></div>
					</a>
					<a class="menu1" id="hide">
					<div><b>Hide</b></div>
					</a>
					<a class="menu1" id="show">
					<div><b>Show</b></div>
					</a>
					<a class="menu1" id="content1">
					<div><b>Content1</b></div>
					</a>
					<a class="menu1" id="content2">
					<div><b>Content2</b></div>
					</a>
					<a class="menu1" id="content2">
					<div><b>Content2</b></div>
					</a>
				</div>
				<div id="menuright">
					<a class="menu1" href="/dl/test.zip">
					<div>Test-Download</div>
					</a>
				</div>
				<div id="header2">
				</div>
				<div id="inhalt">
					<p>Show 'n Hide</p>
					<div id="content1">
					Hier soll Inhalt 1 stehen
					</div>
					<div id="content2">
					Hier soll Inhalt 2 stehen
					</div>
					<div id="content3">
					Hier soll Inhalt 3 stehen
					</div>
				</div>
			</div>
		<div id="footer">
		<a href="impressum.html">
		<div>Impressum</div>
		</a>
		</div>
	</div>
</body>
</html>
 
Jo, dafür gibt es bazillionen fertige jQuery Plugins, aber wenn da es selber machen willst:
Deine Selektoren funktionieren so nicht. Eine id darf es immer nur ein einziges mal im Dokument geben (Wiederholungen werden vom Browser einfach ignoriert). Nur Klassen darf man mehrfach vergeben.
Wenn du dem "Link" irgendwelche Daten mitgeben willst, würde ich die HTML5 data-* Attribute nutzen.
z.B. data-tab="content1" auf den Link, beim klick auslesen und dann "#content1" bzw. ".content1" sichtbar machen.
Du solltest vllt. auch darauf gucken, dass der Inhalt ohne JavaScript noch funktioniert und nutzbar bleibt.
 
Okey, ich werde mich mal drann versuchen wenn ich Daheim bin und noch Zeit habe.
Dank schon mal.
Ergänzung ()

Also habs mal testweise probiert, geht auch soweit, werde mich dann die Tage mal damit befassen das alles in mein Menü rein zu packen
Ergänzung ()

Also, ich habe jetzt schon einen Teilerfolg erzielt, ich habe 4 Buttons und jeder bringt einen anderen text hervor.
Was ich jetzt überhaupt nicht verstehe, die Buttons habe alle keine id oder class oder sonst was, woher zur Hölle weiß der jeweilige Button welcher Text zu ihm gehört ???

Und wie kann man in so einem Wert Absätze etc. definieren ?
Sinn der ganzen Sache ist, das dort später mal verschiedene Texte stehen, also ein bisschen mehr als eine Zeile.

Der Code sieht momentan so aus:

Code: 
				<button>Text 1</button>
					<button>Text 2</button>
					<button>Text 3</button>
					<button>Text 4</button>
					<p><span>Hier soll die Einleitung stehen.</span></p>
					<script>
					$( "button" ).click(function() {
					  var value;
					 
					  switch ( $( "button" ).index( this ) ) {
						case 0 :
						  value = "Hier soll der erste Text stehen.";
						  break;
						case 1 :
						  value = "Hier dann der zweite Text.";
						  break;
						case 2 :
						  value = "Und der dritte soll hier sein.";
						  break;
						case 3 :
						  value = "Sogar einen vierten Text gibt es, ist ja unfassbar !!!";
						  break;
					  }
					 
					  $( "span" ).text( value );
					});
					</script>
 
Was genau hast du vor?
Ich wette dafür gibt es bereits fertige CSS oder jQuery Lösungen.
Willst du eine Navigation bauen?
Willst du Tabs nachbilden?

Button Index ist keine gute Idee.
Wenn ein Button verschiebt wird ein andere Text ausgegeben weil sich der Index verändert hat.

Gib dem Button eine Id, oder ein Data-Attribue (HTML5) dass du dann im Switch-Case auswertest:
HTML: 
<button id="text1">Text 1</button>
					<button id="text2">Text 2</button>
					<button id="text3">Text 3</button>
					<button id="text4">Text 4</button>
					<p><span>Hier soll die Einleitung stehen.</span></p>
					<script>
					$( "button" ).click(function() {
					 
					  switch ( $( "button" ).attr('id') ) {
						case  'text1':
						  value = "Hier soll der erste Text stehen.";
						  break;

						case 'text2':
						  value = "Hier dann der zweite Text.";
						  break;

						case 'text3':
						  value = "Und der dritte soll hier sein.";
						  break;

						case 'text4' :
						  value = "Sogar einen vierten Text gibt es, ist ja unfassbar !!!";
						  break;

                                               default:
                                                  break;
					  }
					 
					  $( "span" ).text( value );
					});
					</script>

MetalForLive schrieb:
Was ich jetzt überhaupt nicht verstehe, die Buttons habe alle keine id oder class oder sonst was, woher zur Hölle weiß der jeweilige Button welcher Text zu ihm gehört ???
Zum Vergrößern anklicken....
Du gehts nach Index -> $( "button" ).index( this )

MetalForLive schrieb:
Und wie kann man in so einem Wert Absätze etc. definieren ?
Sinn der ganzen Sache ist, das dort später mal verschiedene Texte stehen, also ein bisschen mehr als eine Zeile.
Zum Vergrößern anklicken....
Pack HTML rein, wie es dir gefällt.
HTML: 
						case 'text3':
						  value = "<span>Und der dritte<br />soll hier sein.</span>";
						  break;
 
Zuletzt bearbeitet:
NIE NIE NIE NIE Inhalte nur per JavaScript verfügbar machen....
 
Habe ein Youtube Tutorial gefunden zu dem was ich machen möchte

https://www.youtube.com/watch?v=2SkzlzkuEQQ

Aber es klappt ums verrecken nicht, ich habe alles genau so abgetippt wie er in dem Video, beim zweiten mal sogar mit einer komplett leeren Seite ohne CSS aber es geht einfach nicht, es will einfach nicht klappen, ich hock jetzt schon 2 Stunden dran ohne Erfolg.

Code sieht wie folgend aus:
Code: 
<html>
	<head>
	<title>JQuery Test</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		${document}.ready{function{} {
			${"#m_test"}.click{function{} {
				${"#main"}.animate{{opacity:"0", filter:"alpha{opacity=0}"}, 400 function{} {
					${"#main"}.load{"test.html", function{} {
						${"#main"}.animate{{opacity:"1", filter:"alpha{opacity=0}"}, 400};
						
					}};
				}};
			}};
		}};
	</script>
	</head>
	<body>
		<header>
			<section id="menu">
				<ul>
					<li><a href="#!/test" id="m_test">test</a></li>
				</ul>
			</section>
		</header>
		<section id="main">
		<p>Hier soll der Inhalt hin<p>
		</section>
	</body>
</html>
 
1. Installiere dir Firebug für deinen Browser (Fehler sind leicht zu finden, debuging, Elemente Untersuchen, DOM... alles was du benötigst)
2. Nutze aktuelle jQ Version: jQuery 1.11 https://developers.google.com/speed/libraries/devguide?hl=de#jquery

Mit Firebug hättest du gesehen dass du Syntax Fehler hast.
Funktionen werden mit runden Klammern eingeleitet und geschlossen ()
Geschweifte Klammern bilden Objekte (siehe Parameter in Animate-Funktion) {}

Bitte korrigieren.
Und in Zeile 8 hast du nen Fehler bei der Parameter-Übergabe, ein Komma fehlt.

Edit: habe die Fehler korrigiert, und es funzt.
Also ran an die Bugs ;)
 
Zuletzt bearbeitet:
Habe all die Fehler die du aufgezählt hast behoben, Firebug habe ich auch mal installiert und es inspiziert, allerdings konnte ich da jetzt nichts finden, allerdings kenne ich mich mit Firebug auch nicht aus.

Und naja es klappt bei mir immer noch nicht :/
Also ich muss sagen HTML und CSS ist ja einfach (zu verstehen) aber bei java script gehts schon ins eingemachte.
 
Auch HTML mit CSS hat so seine Tücken^^

Zeile 12 Spalte 6
 

Anhänge

  • bug.PNG
    bug.PNG
    11 KB · Aufrufe: 157
Endlich klappt es danke !

Code: 
<html>
	<head>
	<title>JQuery Test</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#m_test").click(function() {
				$("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
					$("#main").load("test.html", function() {
						$("#main").animate({opacity:"1", filter:"alpha(opacity=0)"}, 400);
						
					});
				});
			});
		});
	</script>
	</head>
	<body>
		<header>
			<section id="menu">
				<ul>
					<li><a href="#!/test" id="m_test">test</a></li>
				</ul>
			</section>
		</header>
		<section id="main">
		<p>Hier soll der Inhalt hin<p>
		</section>
	</body>
</html>


Allerdings habe ich das gefühl das Firebug bei mir nicht richtig funktioniert... das zeigt bei mir keine Fehler an
 
Pfeil beim Reiter "Konsole" klicken -> Aktivieren.
Das gilt für alle Reiter.
 
firebug.PNG

Bei mir gibt es keinen Pfeil
 
Ja das habe ich ja von da installiert...

Keine Ahnung warum da kein Pfeil ist.
 
Welche FF Version hast du? Aktuelle also 28 oder 29?
Dein Firebug sieht aus wie von Firefox 2 oder 3.
 
Google Chrome ^^
neuste Version
 
Dann brauchst du es nicht.
Einfach F12 drücken... kannst das Addon ruhig deinstallieren wenn du Chrome benutzt.

Edit: ich sehe gerade auch wozu du das benötigst: Navigation.
Heute löst man das ganze mit CSS, fast gänzlich ohne JavaScript.
Würde ich dir auch empfehlen siehe mein ersten Komment hier im Thread.

Steht deine Seite jedem zur Verfügung oder nur einer gewissen Gruppe an Leuten?
Welche Browser musst du Supporten? Auch den IE6-8? Safari auf dem Mac? Mobile Browser?

Auch für Tablets? Stichwort "Responsive Design"?
 
Zuletzt bearbeitet:
Achso ja, soll eine Navigation sein.

Ne die Seite wird wenn überhaupt nur von einer Hand voll Leute genutzt.
Habe mir darüber jetzt auch noch nicht groß Gedanken gemacht, da das meine ersten Schritte im Web Design sind.
 
KISS - Keep It Simple, Stupid

Mit anderen Worten: Schreibe n klassische Navigation mit klassischen Links und all dem klassischen Scheiß, der mit reinem CSS+HTML wunderbar funktioniert.
Wenn du dann mehr oder minder nützliches JavaScript - BlingBling willst, pack es optional oben drauf.... aber nimm es NIEMALS als Grundvoraussetzung für so etwas triviales.

Übrigens: Content ein- und ausblenden geht sogar in reinem CSS3 mit der :target - Pseudoklasse.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
941
Janush
Janush
D
css nth frage
Antworten
8
Aufrufe
717
D0bby
D
L
Div-Container mit klickbarer Grafik anzeigen oder verstecken
Antworten
16
Aufrufe
1.260
LeanderAT
L
N
(HTML) Bild verschwindet hinter live Hintergrund
Antworten
2
Aufrufe
757
funkmasterflow
funkmasterflow
W
CSS: Formatierungsprobleme mit einer Tabelle
Antworten
9
Aufrufe
695
Nixdorf
Nixdorf
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz