Dynamisch Inhaltselemente laden in Tabs

Hallo

Backend: Ich habe eine Seite angelegt, diese Seite enthält 8 Artikel.
FrontEnd: Sieht man 8 Tabs (per eigenes HTML + jQuery angelegt und jedes Tab bekommt per Insert Tag den bestimmten Artikelinhalt).

So wird alles auf einmal geladen, was natürlich bei längeren Artikeln mit großen Bildern etwas ungünstig ist.
Meine Frage dazu, ob es auf einfache Weise möglich ist, dass der Artikel Inhalt (der per Insert Tag eingebunden ist) zum Beispiel vom dritten Tab erst reingeladen wird, wenn man auch auf den dritten Tab klickt?

Hoffe bin in der richtigen Rubrik.
Und wie immer für Hilfe dankbar, hat bis jetzt immer so gut geklappt - danke dafür :)

hi!

noch nie probiert, aber eine idee.
legst dir die tabs als seiten an und bei klick auf einen tab lädst du per ajax (mit jquery die methode .load) die id des artikels aus der jeweilligen seite.
die id kann man ja bei dem .load mit dran hängen.

falls der inhalt doch etwas größer wird dann vielleicht doch lieber mit der methode .ajax laden, da könntest du ja noch einen preloader mit einbauen der verschwindet wenn der inhalt da ist.

danke für die nachricht, aber wie kann ich denn mit der ID den Artikel laden? Wenn ich die Seite lade, lädt er dann nicht alles (mit Header, Body etc - anstatt nur den eigentlichen Artikel Inhalt)? Oder stehe ich auf dem Schlauch?

Dazu brauchst du ein eigenes Tab-Script, dass die Inhalte bei klick per AJAX nachläd. Beim nachladen selbst hilft dir diese Erweiterung

nein du kannst da auch nur eine id laden:

http://api.jquery.com/load/

die tabs kannst du ja als anchor bauen, da kannst du per jquery schonmal die seite auslesen:

Code:

---

var href = $(this).attr('href');

---

da wir ja moderne seiten bauen kannst du die id des zielcontainer ja in ein data attribut schreiben: :D

HTML-Code:

---

<a class="tab" data-target="id-des-artikels" href="link-zur-seite.html">Link
</a>

---

...und dann auslesen

Code:

---

var target = $(this).attr('data-target');

---

so kannste dir ja den link zusammen bauen den der ajay-request aufrufen soll:

Code:

---

var link = href + " #" + target;

---

brauchste nur noch den container in den der inhalt geladen werden soll, entweder packst den auch in ein data-attribut oder um es etwas dynamischer zu gestalten den index des tabs für den container verwenden:

Code:

---

var indexA = $("a").index(this);

---

und dann laden

Code:

---

$("div").index(indexA).load(link);

---

das ganze natürlich in ein klick event wo das standartverhalten unterdrückt wird

Code:

---

$("a").click(function(e){
e.preventDefault();
})

---

hab das ganze jetzt nicht getestet, klingt aber ganz gut :) vorallem bei dem index könnte es vielleicht ein problem geben, da musst du notfalls mal in der jquery api schauen.
vor dem ajax request könntest du ja noch abfragen ob der container schon inhalt hat, also schon geladen wurde. und an das load kannste auch noch eine callback funktion dran hängen die vielleicht einen preloader ausblendet den du beim click starten könntest.

danke danke, klingt soweit schon mal ganz gut.... werde es dann demnächst mal versuchen umzusetzen :)