Per Klick auf Links Div-Inhalt austauschen

**Guitar** · 31.05.2009 14:28

Hallo,

beschäftige mich erst seit ganz kurzer Zeit mit JQuery, benötige aber für ein Projekt folgende Funktion:

Per Klick auf einen Link in einer Linkliste soll der INhalt eines Div-Containers per AJAX ausgetauscht werden (mit der entsprechenden URL).

Hier mal eine rudimentäre Version des HTML:

HTML-Code:

<div id="inhalt">
<p>Der Inhalt des Divs soll verändert werden</p>
</div>

<ul>
<li><a href="seite1.html">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
.
.
.

</ul>

Die URL müsste also aus den Links ausgelesen und die entsprechende Seite in #inhalt geladen werden.

Ich habe es mit $.ajax zwar schon hingekriegt, das ein neuer Inhalt geladen wird, aber wie schaffe ich es, das href-Attribut auszulesen?
(Wenn das ganze noch mit einem Fadeout/FadeIn-Effekt passiert, wäre das das Sahnehäubchen

).

Vielleicht kann mir jemand einen Tipp geben.

**Cybergreek** · 31.05.2009 15:09

Da Du ja schon einiges selbst hinbekommen hast mal nur ein Link

Zitat von Guitar

...aber wie schaffe ich es, das href-Attribut auszulesen?

http://docs.jquery.com/Attributes/attr#name

**the0bone** · 31.05.2009 15:24

Guckst du http://yourhp.de/demo/jQuery/loadContent.php

**Guitar** · 31.05.2009 20:45

Okay, danke für die Links. Ein Problem noch:
wie kann ich an die Funktion zum laden des neuen Inhalts die URL des angeklickten Links übergeben?
Denn ich würde es gerne als normale Liste mit "echten" Links machen, damit die Seite auch ohne Javascript zumindest "normal" geöffnet werden würden.

**Cybergreek** · 31.05.2009 22:42

Zitat von Guitar

...wie kann ich an die Funktion zum laden des neuen Inhalts die URL des angeklickten Links übergeben?

Genau das solltest Du mit dem hinkriegen, was hinterm ersten Link steckt (also $("#irgendwas").attr("href")).

**Guitar** · 31.05.2009 22:52

Aber dafür müsste ich doch jedem Link eine eindeutige ID geben, oder?
Gibt es nicht eine universellere Möglichkeit, so daß ich bei einer Erweiterung der Liste nicht den JQuery-Code anpassen müsste?

**the0bone** · 31.05.2009 23:06

Ja gibt es... jquery kann den href auslesen und nutzen... schaff ich aber heute nicht mehr!
:-D

**Guitar** · 01.06.2009 11:09

Hab's hinbekommen, und sogar so, dass die Navi bei deaktiviertem Javascript trotzdem funzt.

Für alle, die's interessiert:

HTML-Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Liste-Navi</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  
  $(document).ready(function(){
  
  	// Innerhalb der Liste href auslesen und durch # ersetzen, title-Attribut mit dem Wert des href schreiben
  	$("ul.liste a").each(function(){
  	
  		var url = $(this).attr("href");
  		$(this).attr("title",url).attr("href","#");
  	
  	});
  	
  	// per Click entsprechende URL in das DIV laden, aber nur das DIV #seiteninhalt
  	$("ul.liste a").click(function(){
  		var quelle = $(this).attr("title") + " #seiteninhalt";
  		$("#container").load(quelle);
  	});
  
  });
  
  </script>
  <style type="text/css">
  	#container {
  		width: 400px;
  		height: 300px;
  		border: 1px solid #ccc;
  		padding: 1em;
  	}
  </style>
</head>
<body>
<div id="container">
Zu ersetzender Inhalt
</div>
<ul class="liste">
	<li><a href="seite1.html">Seite 1</a></li>
	<li><a href="seite2.html">Seite 2</a></li>
	<li><a href="seite3.html">Seite 3</a></li>
	<li><a href="seite4.html">Seite 4</a></li>
	<li><a href="seite5.html">Seite 5</a></li>
</ul>

</body>
</html>

Weiss nicht, ob das die perfekte Lösung ist, aber sie funktioniert. Bin aber trotzdem für Verbesserungsvorschläge offen!

**the0bone** · 01.06.2009 11:12

Genau so hatte ich mir das gedacht. jquery das Dokument durchsuchen lassen und einfach die href Ziele überschreiben. :-)

**Guitar** · 01.06.2009 16:13

Hm, kann ich das ganze jetzt noch irgendwie so umbauen, dass das DIV erst ausgefadet und wenn der Inhalt geladen ist, wieder eingefadet wird?

**steffenk** · 01.06.2009 16:46

sicher. Vor load ausfaden, load hat die callback - Funktion, wo Du wieder einblenden kannst

**steffenk** · 01.06.2009 16:53

also sowas sollte gehen:

Code:

$("#container").fadeOut(1000);
$("#container").load(quelle, {}, function() { $("#container").fadeIn(1000); });

**Guitar** · 01.06.2009 18:21

Hi,
damit funzt zwar das faden, aber man sieht den neuen Inhalt schon, bevor #container ausgeblendet wird.

**steffenk** · 01.06.2009 18:31

dann musst Du eine pause einbauen, z.B. wie hier:
http://www.learningjquery.com/2007/0...ct-delay-trick

**Guitar** · 02.06.2009 00:18

Okay, soweit funzt alles. Jetzt das nächste Problem:

der einzubindende Code enthält auch einen Javascript-Block. Dieser wird nicht eingebunden. Ist das überhaupt möglich? Das restliche HTML erscheint wie gewünscht.

zur Startseite vom TP

Thema: Per Klick auf Links Div-Inhalt austauschen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Per Klick auf Links Div-Inhalt austauschen

Ähnliche Themen

Bilder per Klick austauschen

Per klick bewegliches bild mit inhalt

Bilder in Ebene on klick austauschen

Kann man den Inhalt einer CSS-Box austauschen (so wie frames)?"

inhalt austauschen

Aktive Benutzer

Aktive Benutzer