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:
<!DOCTYPE html>
<html>
<head>
<title>
Beispielseite
</title>
<meta charset="UTF-8" />
<meta name="description" content="" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js">
</script>
<script>
$(document).ready(function() {
$("#menu img").click(function() {
$("#menu img:first-of-type").css("display", "none");
$("#menu img:last-of-type").css("display", "block");
$(this).parent().find("img:first-of-type").css("display", "block");
$(this).parent().find("img:last-of-type").css("display", "none");
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
display: block;
}
img:first-of-type {
display: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<img src="http://www.andys-fahrschule.eu/svg/br_blanck_on.svg" />
<img src="http://www.andys-fahrschule.eu/svg/br_blanck_off.svg" />
</li>
<li>
<img src="http://www.andys-fahrschule.eu/svg/br_blanck_on.svg" />
<img src="http://www.andys-fahrschule.eu/svg/br_blanck_off.svg" />
</li>
<li>
<img src="http://www.andys-fahrschule.eu/svg/br_blanck_on.svg" />
<img src="http://www.andys-fahrschule.eu/svg/br_blanck_off.svg" />
</li>
</ul>
</div>
</body>
</html>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. 
Wenn nein einfach sagen.