88 Stimmen

jQuery: Durch Klick auf Links DIV-Inhalt laden und ersetzen

Tutorial von Stefan Trost | Letztes Update am 19.08.2023 | Erstellt am 28.01.2015

In diesem Tutorial möchte ich euch zeigen, wie ihr mithilfe von JavaSkript und jQuery einige Links auf eurer Website so tunen könnt, dass bei einem Klick auf den Link ein definierter Inhalt dynamisch mit AJAX in eine DIV-Box geladen wird, ohne dabei die anderen Inhalte der Seite zu verändern oder neu zu laden.

HTML

Schauen wir uns zunächst das HTML an. Hier haben wir unsere Links und den DIV-Container mit der ID "c", in denen später die Inhalte geladen werden sollen.

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

<div id="c"></div>

Jedem Link haben wir die Klasse "cloader" zugewiesen.

JavaScript / jQuery

In unserem JavaSkript weisen wir nun allen HTML-Elementen mit der Klasse "cloader" die gewünschte Funktion zu.

$(document).ready(function() {	
					
   $(".cloader").click(function() {

      var p = $(this).attr("href");

      $("#c").load(p);   

      return false;

   });

});

Als erstes lesen wir das Attribut "href" aus und speichern geht es in der Variable "p". Bei unseren Links oben sind das entsprechend dem jeweiligen Link "seite1.html", "seite2.html" und "seite3.html".

Anschließend benutzen wir $("#c").load(p) um den Inhalt aus "p" zu laden und in den Container zu schreiben - schon ist je nachdem, welchen Link wir geklickt haben der entsprechende Inhalt in unserem DIV.

Die Seiten "seite1.html", "seite2.html" und "seite3.html" müssen natürlich vorher angelegt werden und den gewünschten HTML Quelltext enthalten.

Alternative

Wenn wir nur einzelne Links verwenden möchten oder auf die Geschichte mit der Variablen verzichten möchten, können wir auch folgende Alternative benutzen.

<ul>
  <li><a href="seite1.html" class="loadseite1">Seite 1</a></li>
  <li><a href="seite2.html" class="loadseite2">Seite 2</a></li>
</ul>

<div id="c"></div>

Statt unserer allgemeinen "cloader"-Klasse verwenden wir nun unterschiedliche Klassen, für jeden Link eine eigene.

$(document).ready(function() {	
					
   $(".loadseite1").click(function() {
      $("#c").load('seite1.htm');   
      return false;
   });

   $(".loadseite2").click(function() {
      $("#c").load('seite2.htm');   
      return false;
   });
});

Entsprechend haben wir auch für jeden Link eine eigene Funktion und laden darin direkt die entsprechende Seite.

Übrigens können wir die Klasse natürlich auch jedem anderen Element auf unserer Seite zuweisen, um daraus einen Link zu machen. Eine normale DIV-Box könnten wir beispielsweise mit <div class="loadseite1"><div> entsprechend umbauen.

AntwortenPositivNegativDatumStimmen
33 Stimmen

Soweit habe ich es verstanden aber wie bekomme ich das jetzt hin?

Lege ich 2 Seiten im Frame an oder wie? Wie bekomme ich den Inhalt in eine Frame Seite und wie bekomme ich die Aufzählung nebeneinander?

Gruß Peter
17.02.2015 um 17:24

AntwortenPositiv Negativ
44 Stimmen

Du brauchst keinen Frame, denn die DIV-Box ist quasi dein "Frame", in den der Inhalt geladen wird.

Einerseits brauchst du die Hauptseite, auf der die Links und die DIV-Box sind und andererseits eine einzelne Seite/Datei (im Beispiel seite1.html etc) in der der Inhalt ist.

Alternativ kann man natürlich auch eine PHP-Seite benutzen, der man einfach eine Variable übergibt und dann den entsprechenden Inhalt dynamisch ausspuckt.
18.02.2015 um 02:12

Positiv Negativ
33 Stimmen

Danke für die Hilfe.

Ich habe es doch anders gelöst mit einem Inlineframe und Ebenen klapt auch.
18.02.2015 um 08:30

Positiv Negativ
Antworten
33 Stimmen

Habe es auch versucht, ich bekomme es nicht hin.

Bei mir lädt sich ganz normal meine Seite, aber nicht im Austausch. Ich möchte meine Navigation als festen Bestandteil haben und beim Klick auf einem Link in einem DIV Inhalt tauschen.
28.08.2016 um 13:34

AntwortenPositiv Negativ
33 Stimmen

In den Script-Schnipseln ist jeweils die vorletzte schließende runde Klammer ) zuviel.

Aber auch so funktioniert es mit aktuellem jQery nicht (nicht mehr?). Es muss heißen

$(".cloader").on("click', function() { ... })
17.08.2023 um 15:07

AntwortenPositiv Negativ
22 Stimmen

Vielen Dank für den Hinweis.

Sollte jetzt korrigiert sein.
17.08.2023 um 23:15

Positiv Negativ
Antworten
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.