JavaScript / JQuery | Buttons & AJAX

  • Schönen guten Tag! :)
    Ich habe ein Problem mit einer Webseite an der ich arbeite, und zwar geht es um die Navigation. Es werden *.svg Dateien als Buttons benutzt, welche sich quasi "an" und "aus" schalten können. Dabei soll immer jeweils ein Button "an" geschaltet sein. Je nachdem welcher Button gewählt wurde, wird per AJAX der Inhalt geladen. So zumindest die Theorie, jedoch scheitere ich an der praktischen Umsetzung. Hier erst einmal der Beispielcode:

    Nun, es existieren 2 solcher Menüs. Links neben dem Text und Rechts. Die linke Menüleiste soll jeweils ein Untermenü enthalten, welches ebenfalls mit diesen Buttons (diese sind natürlich später beschriftet ^^) ausgestattet sein wird. Je nachdem welcher Menüpunkt links ausgewählt wurde, wird auch das Menü sich verändern (sprich: Per AJAX die entsprechenden Buttons laden). Das Verhalten soll später ebenfalls dem hier gezeigten Beispiel entsprechen, nur halt "in sich selber", also unabhängig ob der übergeordnete Menüpunkt leuchtet. Das Rechte Menü besitzt keine weiteren Unterpunkte, dort werden dann die wichtigsten Seiten wie Kontaktmöglichkeiten der Impressum verlinkt werden.

    Weiß jemand wie man diese Buttonspielerei am besten so löst wie ich mir das vorstelle? Das Laden von Inhalt per AJAX ist kein Problem, jedoch diese Fallunterscheidungen was die Buttons betrifft, bringt mich zur Verzweiflung. ^^

    Achja, in meinen Beispiel kann man zwar ein Button einschalten, aber nicht wieder abschalten. Auch das möchte ich irgendwie bewerkstelligen... In dem Fall soll sich einfach der untergeordnete Menüpunkt schließen bzw. nicht mehr öffnen wenn man mit der Maus über den Button fährt. :S

  • Kannst du mittels JS leicht umsetzen (Ajax hab ich noch nie gemacht, da musst du dich kümmern :)):

    Sowas kann man besonders mit PHP gut erstellen, weils einfach nur durchnummeriert wird :)
    Ich hoffe, ich konnte dir weiterhelfen.

  • Danke für deine Antwort! Ich konnte das Problem jedoch ein wenig anders lösen. Ich weise meinen Listen Elemente einfach ein data- Attribut zu mit individuellen Namen. Durch das auslesen dieses Attributes kann ich die Bezeichnung in einer Variable ablegen um so ein einfachen Vergleich zu machen. Die img Tags werden ebenfalls mit einem data- Attribut belegt, welche den Link zu der einzubindenden Textteil haben. Dieser wird letztendlich mit AJAX geladen. Funktioniert auch schon auf der Webseite ganz gut, nur noch das Untermenü fehlt. Aber wenn man es einmal hat, ist das auch nicht mehr so schwierig. ^^

    Entspricht eigentlich deiner Lösung @Kanashius. Nur etwas anders "formuliert". ^^

  • Hallu,

    ich hab das jetzt erst gesehen :S Ich hab auch mal was erstelt, weil mir aufgefallen ist,
    dass wenn man 2 mal auf den gleichen Button klickt, der Button nicht mehr "An"geht. Erst wieder, wenn man einen anderen anklickt.
    Verwendeter Browser: Maxthon.

    Jedenfalls hier meine Lösung:

  • Noch ein Nachtrag:

    Ich hoffe ich hab das richtig verstanden :D Wenn nein einfach sagen.
    In dem Beispiel, kann theoretisch jeder "An/Aus" Button individuell sein. Und ein Beispiel zur zum Laden des Inhalts.

    Liebe Grüße