Seiten werden dynamisch geladen, Links aber trotzdem hervorheben?

[Lotus]

Hallo, ich hab zur Zeit nen kleines Problem. Ich lade den Content meiner Website dynamisch über einige Links. Wenn man diese jetzt anklickt, kann ich die ja nicht so einfach wie bei statischen Seiten hervorheben als gerade "aktiv". Ich könnte jetzt die Farbe ändern wenn man nen onClick Ereignis aufruft oder so.. aber das Problem ist ja, wenn ich nen neuen Link anklicke, müsste der alte "aktive" Link seine ursprüngliche Farbe annehmen.. ich weiß nicht wie ich das modellieren soll.. jemand ne idee?

 

[mermshaus]

Beim Anklicken eines Eintrags für alle Einträge die CSS-Klasse oder die Eigenschaft, die anzeigt, dass ein Eintrag aktiv ist, entfernen/zurücksetzen und dann für den angeklickten Eintrag neu setzen.

Etwas eleganter ist's, wenn du vorher noch rasch prüfst, ob der angeklickte Eintrag bereits aktiv ist. Dann muss nichts verändert werden.

 

[Lotus]

Beim Anklicken eines Eintrags für alle Einträge die CSS-Klasse oder die Eigenschaft, die anzeigt, dass ein Eintrag aktiv ist, entfernen/zurücksetzen und dann für den angeklickten Eintrag neu setzen.

Etwas eleganter ist's, wenn du vorher noch rasch prüfst, ob der angeklickte Eintrag bereits aktiv ist. Dann muss nichts verändert werden.

Hi und danke für deine Antwort. Ich weiß jetzt gerade nicht so genau was du meinst... du schreibst: "für alle Einträge"... was ist damit gemeint? Für alle Elemente ein und der selben CSS-Klasse?

 

[mermshaus]

Ich meinte die Links, also vermutlich a-Elemente. Die Menüeinträge eben, die hervorgehoben werden sollen, wenn die zugehörige Seite geladen ist.

 

[Lotus]

Okay, und wie soll ich das deiner Meinung nach machen? Soll ich allen a-elementen ne class zuweisen, wenn ich raufklicke weiß ich dem a ne neue class zu (farbig z.B.) und dann? weiß gerade nicht wie ich das jetzt umsetzen soll

 

[threadi]

Doch, genau das ist damit gemeint. Und die Links müssen vorher nicht mal eine Klasse haben. Angenommen Du klickt diesen Link an

<a href="linkziel.html" onclick="return loadContent(this);">Linktitel</a>

Dann lädt die Funktion "loadContent" nun den Content wie Du ihn ja scheinbar schon umgesetzt hast und ändert gleichzeitig die Klassenzuordnung des Links der angeklickt wurde:

function loadContent( obj ) {
 // Daten laden
 // ...
 // bla
 // ...
 // Klasse vergeben
 obj.className = "aktiv";
}

Wenn du gleichzeitig auch Link die diese Klasse bereits haben zurücksetzen willst (was ja logisch wäre), dann müsstest Du diese Element ermitteln und dann einzeln zurücksetzen. Leider wird getElementsByClassName nicht einheitlich unterstützt, daher wähle ich dafür meist diesen Weg:

var elemente = document.getElementsByTagName("a");
for( var e = 0;e<elemente.length;e++)
{
 elemente[e].className = "";
}

und das einfach innerhalb der o.g. Funktion vor dem Setzen der Klasse ausführen.

 

[Lotus]

Wow erstmal vielen vielen Dank für den Code.. jetzt verstehe ich schon besser was du meinst... das hat natürlich den Nachteil, dass ich damit auch andere Elemente vom Typ "a" ändere.. gibt es eine Möglichkeit dieses noch auf einen Div-Container zu begrenzen?

 

[threadi]

Klar.

document.getElementById('IDdesDiv').getElementsByTagName("a");

 

[Lotus]

Also irgendwie funktioniert das noch nicht...

Ich hab folgenden Code geschrieben:

function loadStyle(obj, url) {
    window.location.replace(url);
    var elemente = document.getElementsByTagName("a");
    for( var e = 0;e<elemente.length;e++)
    {
         elemente[e].className = "";
    }
    obj.className = "xaktiv";
    alert(obj.className);
}

Er gibt mir auch den richten Klassennamen wieder, aber weder Firebug noch der Browser zeigen mir die Änderungen an... Was mach ich denn falsch?

 

[Gilles]

Wow erstmal vielen vielen Dank für den Code.. jetzt verstehe ich schon besser was du meinst... das hat natürlich den Nachteil, dass ich damit auch andere Elemente vom Typ "a" ändere.. gibt es eine Möglichkeit dieses noch auf einen Div-Container zu begrenzen?

Klar. Dabei gibts du deinem Div eine Id.

var elemente = document.getElementById("container").getElementsByTagName("a");
for( var e = 0;e<elemente.length;e++)
{
 elemente[e].className = "";
}