jQuery

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

ich habe folgenden jQuery Code für meine Navigationsleiste:

$(document).ready(function(){

 $(".navia").click(function(){
 var active = "#subnavibg" + $(this).attr("id") + ":hidden";
 $(".subnavibg:visible").hide();
 $(".navia").removeClass("selected");
 $(active).show();
 $(this).addClass("selected");
 });

});

Wie man erkennen kann, passiert folgendes: Wenn man auf einen Link in der Hauptnavigation (Klasse „navia“) klickt, wird eine eventuell vorhandene Subnavigationsleiste ausgeblendet und dann die entsprechende Leiste eingeblendet. Wenn man auf den selben Link nochmal klickt, wird die Subnavigationsleiste wieder komplett ausgeblendet.

Mein Problem: Wenn man auf einen Link in der Hauptnavigation klickt, wird dieser mittels einer Klassenzuweisung eingefärbt, damit man erkennnen kann, welche Subnavigation geöffnet ist. Wenn man auf einen anderen Link klickt, wird der vorherige wieder „entfärbt“ und der neue wird eingefärbt. Nur wenn man auf den selben Link klickt, um die Subnavigation wieder auszublenden, bleibt der Link noch eingefärbt.
Mir ist durchaus bewusst, warum das so ist, ich komme aber schlichtweg nicht auf die Lösung, irgendwie bin ich mit meiner Logik in einer Sackgasse…

Weiß jemand die Lösung für meine Problem?

Vielen Dank und viele Grüße,
Iustinian

#2

Mein Problem: Wenn man auf einen Link in der Hauptnavigation
klickt, wird dieser mittels einer Klassenzuweisung eingefärbt,
damit man erkennnen kann, welche Subnavigation geöffnet ist.
Wenn man auf einen anderen Link klickt, wird der vorherige
wieder „entfärbt“ und der neue wird eingefärbt. Nur wenn man
auf den selben Link klickt, um die Subnavigation wieder
auszublenden, bleibt der Link noch eingefärbt.
Mir ist durchaus bewusst, warum das so ist, ich komme aber
schlichtweg nicht auf die Lösung, irgendwie bin ich mit meiner
Logik in einer Sackgasse…

Wie soll es sich denn verhalten? Du beschreibst was passiert, aber nicht wie Du es eigentlich gerne hättest. Für mich hört sich das was du schreibst auch logisch an…

#3

Wie soll es sich denn verhalten? Du beschreibst was passiert,
aber nicht wie Du es eigentlich gerne hättest. Für mich hört
sich das was du schreibst auch logisch an…

Mal ein Beispiel: Wenn ich auf den Hauptpunkt „Kontakt“ klicke, erscheint das Subnavigationsmenü mit „Übersicht“ und „Kontaktformular“. Dabei färbt sich „Kontakt“ grün ein. Wenn ich jetzt auf einen anderen Hauptpunkt klicke, würde sich dieser grün einfärben und „Kontakt“ wieder normal einfärben. Wenn ich jedoch bei „Kontakt“ bin und nochmal auf „Kontakt“ klicke, verschwindet ja die Subnavigation wieder, was ja gewollt ist. Nur die Schriftfarbe von „Kontakt“ bleibt weiterhin grün. Diese soll sich wieder normal einfärben, weil die Subnavigation von Kontakt ja nicht mehr da ist.

Ich hoffe, anhand eines Beispiels ist leichter zu verstehen, was ich meine. Eigentlich sieht es so simpel aus, ist bloß etwas schwer zu erklären :wink:

Gruß,
Iustinian

#4

Ich glaube Du möchtest das hier:

$(document).ready(function(){

 $(".navia").click(function(){
 var active = "#subnavibg" + $(this).attr("id") + ":hidden";
 $(".subnavibg:visible").hide();
 $(".navia").removeClass("selected");
 $(active).show();
 if( $(this).hasClass("selected") ){
 $(this).removeClass("selected");
 } else {
 $(this).addClass("selected");
 }
 });

});
#5

Oder kurz mit der toggleClass-function von jQuery

$(document).ready(function(){

 $(".navia").click(function(){
 var active = "#subnavibg" + $(this).attr("id") + ":hidden";
 $(".subnavibg:visible").hide();
 $(".navia").removeClass("selected");
 $(active).show();
 $(this).toggleClass("selected");
 });
});
#6

Hallo,

führt leider beides nicht zum Ergebnis… Beide Varianten ändern leider garnichts… Ich habe so etwas in der Art auch schon probiert, ich habe sogar mal einen separaten Click-Handler auf die Klasse „selected“ gelegt, das hat auch nichts gebracht…

Ich muss zugeben, dass Javascript bzw. jQuery nicht mein Spazialgebiet ist, da ich eher aus der PHP-Ecke komme, aber langsam bin ich auch mit der jQuery Dokumentation am Ende…

Viele Grüße und vielen Dank für die Mühen,
Iustinian