Wer von euch schon einmal Webseiten erstellt hat kennt vielleicht dieses Problem: Man möchte einen Navigationslink farblich hervorheben wenn man sich auf dessen Unterseite befindet. Natürlich könnte man dies auch mittels serverseitigen Sprachen wie PHP leicht lösen, jedoch könnte man für diesen Anwendungszweck auch jQuery nutzen. In dieser Kurzanleitung zeigen wir euch ein passendes jQuery-Codebeispiel zu diesem Thema. 

Wie immer muss auf jeder Seite selbstverständlich jQuery im Kopf-Bereich eingebunden sein um das folgende Codebeispiel nutzen zu können. Dazu laden wir zunächst jQuery von der offiziellen Webseite herunter oder nutzen die Hosted Libraries von Google.

Im Head-Bereich unserer Website binden wir zunächst also jQuery ein:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Nun fügen unseren eigentlichen Code am Ende der Webseite ein:

<script>
$(document).ready(function() {
    $(".menu [href]").each(function() {
    if (this.href == window.location.href) {
    	$(this).find(".menu_cat").addClass("activeclass");
        }
    });
});
</script>

Dort ändern wir nun die entsprechenden Klassen- oder ID-Berzeichnungen ab, damit es mit unserer Menüstruktur übereinstimmt. Solltet ihr euch nun auf der entsprechenden Unterseite befinden wird der Menülink mit der zusätzlichen CSS-Klasse „activeclass“ ausgestattet.