Dieser Artikel beschreibt die Methode von JavaScript, um die aktuelle Aktivierung der Seitennavigation zu implementieren. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:
HTML -Teil (Referenznavigation, nicht verfügbar # Anstelle von Links können Sie mehrere neue statische Seiten erstellen)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/category/html-css/"> html/css </a> </li> <li> <a href = "/category/javascrikt/" href = "/category/seo/"> seo </a> </li> <li> <a href = "/category/front-end/"> front-end news </a> </li> </ul>
JavaScript -Teil (Geben Sie die Navigation der aktuellen Seite mit der .on -Klasse hinzu)
$ (function () {var a1 = document.url; var a2 = $ ("#nav a"); für (var i = 0; i <a2.Length; i ++) {if (a1.indexof ($ (a2 [i]). Attr ("href")! = -1) {$ (a2 [i]). parent (). addClass ("on"); return;}} $ (a2 [0]). Parent (). AddClass ("on");})CSS -Teil (relevante Anpassungen können entsprechend Ihren Anforderungen vorgenommen werden)
#nav li {Anzeige: Inline-Block; Float: Links; Text-Align: Mitte; Höhe: 36px; Padding-Links: 4px; Zeilenhöhe: 36px; Hintergrund: URL (Bilder/nav.gif) No-Repeat Right Unten; li.on {Schriftgewicht: BOLD; Hintergrund: URL (Bilder/Nav.Gif) No-Repeat 0 0;Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.