Este artículo describe el método de JavaScript para implementar la activación actual de navegación de la página. Compártelo para su referencia. Los detalles son los siguientes:
Part HTML (navegación referenciada, no disponible # en lugar de enlaces, la prueba puede crear varias nuevas páginas estáticas)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/category/html-css/"> html/css </a> </li> <li> <a href = "/category/javaScript/"> javaScript </a> </li> <li> <AHIS> href = "/categoría/SEO/"> SEO </a> </li> <li> <a href = "/category/front-end/"> Front-end News </a> </li> </ul>
parte de JavaScript (especifique la navegación de la página actual con la clase .on agregada)
$ (function () {var a1 = document.url; var a2 = $ ("#nav a"); for (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");})Part CSS (se pueden hacer ajustes relevantes de acuerdo con sus necesidades)
#nav li {display: inline-block; float: left; text-align: center; altura: 36px; relleno-izquierda: 4px; línea-height: 36px; fondos: url (images/nav.gif) sin repat li.on {font-weight: bold; fondos: url (imágenes/nav.gif) No-repeat 0 0 0; margen-izquierda: -3px;}#nav li.on a {fondo: url (imágenes/nav.gif) No repate correcto 0;}Espero que este artículo sea útil para la programación de JavaScript de todos.