Cet article décrit la méthode de JavaScript pour implémenter l'activation actuelle de la navigation de la page. Partagez-le pour votre référence. Les détails sont les suivants:
Partie HTML (navigation référencée, non disponible # Au lieu de liens, le test peut créer plusieurs nouvelles pages statiques)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/ catégorie / html-css /"> html / css </a> </li> <li> <a href = "/ catégorie / javascript /"> javascript </a> href = "/ catégorie / seo /"> SEO </a> </li> <li> <a href = "/ catégorie / front-end /"> Front-End News </a> </li> </ul>
Partie JavaScript (spécifiez la navigation de la page actuelle avec .on Class ajoutée)
$ (function () {var a1 = document.url; var a2 = $ ("# nav a"); for (var i = 0; i <a2.length; i ++) {if (a1.indexof ($ (a2 [i]). att ("href"))! = -1) ?CSS partie (les ajustements pertinents peuvent être effectués en fonction de vos besoins)
#nav li {affichage: block en ligne; float: gauche; texte-align: central; hauteur: 36px; padding-left: 4px; line-height: 36px; fond: url (images / nav.gif) sans répétition droite;} # nav li a {affichage: block; couleur: # 777; pading: 0 15px 0 10px;} # nAV: # 777; padding: 0 15px 0 10px;} # NAV; li.on {font-weight: bold; background: url (images / nav.gif) no-repeat 0 0; margin-left: -3px;} # nav li.on a {background: url (images / nav.gif) ne repeat droit 0;}J'espère que cet article sera utile à la programmation JavaScript de tous.