Erstellen eines dynamischen Menüs mit jQuery

Question

Wir erstellen eine neue Website.

Wir möchten die Seite mit iframes bilden, die verschiedene Teile der Seite darstellen, Navigation, Inhalt, Header usw.

jedoch unser Navigationsmenü hat einige „Kontext“ hinein gebaut. Das heißt, wenn Sie der "About" -Abschnitt sind, wird der Button/Link für "About" hervorgehoben, um anzuzeigen, dass dies Ihr Standort auf der Site ist. Ich mag einen Meta-Tag in jeder Seite enthalten, wie dies (oder so ähnlich)

<meta name="page" content="--page name goes here--" /> 

Ich mag dann in der Lage sein, alle eine ID, die nav Menüpunkte zu geben. Wenn die ID eines Navigationselement-Elements mit dem Inhalt des Meta-Tags "Seite" übereinstimmt, möchte ich, dass das markierte Bild anstelle des regulären angezeigt wird.

Können Sie die grundlegenden Schritte, vielleicht mit etwas Code, um dies zu tun skizzieren.

Answer 1

statt id in Meta-Tag, warum Sie in bereit Event-Handler von Seite tun es nicht die Umsetzung:

$(document).ready(function(){ 
    $("#ID_OF_MENU_FOR_THIS_PAGE").addClass("CLASS_TO_HIGHLIGHT_CURRENT_MENU"); 
}); 

Es funktioniert wirklich gut und ich bin mit regelmäßig this!

Answer 2

der einfachste Weg, zum Beispiel sagen würde Sie haben 5 Links im nav-Menü (global nav)

Sie id = "über" dem nav Artikel

dann verwenden Sie diesen JQuery-Code hinzufügen können

<script> 
    $(document).ready(function() { 
     $('about').addClass('active'); 
    }); 
</script>' 

und eine CSS-Klasse als aktiv definieren und bekommen es zu tun, was Sie es (wie Highlight oder watever)

tun möchten, wenn Sie Bild auf Seite ändern wollen se Sie können dieses Bit Code verwenden: $ (Dokument) .ready (Funktion() { $ ('aktiv'). css ('Hintergrund', 'URL (/images/tabs/account_hover.png) no wiederhole 0 0 '); }); '