0 0 Stimmen

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

Tutorial von Progger99 | 28.01.2015 um 17:01 Uhr

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").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 unterschiedliche Klassen, für jeden Link eine.

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

   $(".loadseite2").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

Alaska1966

Profil anzeigen | Nachricht
Avatar
00 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 Uhr

AntwortenPositiv Negativ

Progger99

Profil anzeigen | Nachricht
Avatar
00 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 Uhr

Positiv Negativ

Alaska1966

Profil anzeigen | Nachricht
Avatar
00 Stimmen

Danke für die Hilfe.

Ich habe es doch anders gelöst mit ienem inlineframe und ebenen klapt auch.
18.02.2015 um 08:30 Uhr

Positiv Negativ
00 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 Uhr

AntwortenPositiv Negativ
Antworten

Über den Autor

Avatar AutorDer Autor hat keine Kurzbeschreibung seines Profils angegeben.
Profil anzeigen | Nachricht

 

Ähnliche Themen

jQuery: Element ersetzen
Frage | 1 Antwort

Wichtiger Hinweis

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.