allá.
Estoy casi terminando un sitio web que estoy desarrollando desde cero en wordpress, sin complementos ni temas prefabricados. Pero me enfrento a un problema tonto, supongo, que no entiendo lo que está pasando.
Hay este tipo de elemento de menú que necesito resaltar. Funciona bien en todas partes excepto en la paginación. No estoy usando un menú de wordpress, por lo que no puedo usar clases preconstruidas como "i.current_page_item" y "li.current_page_item a"
Es por eso que estoy usando este JS siguiente:
const activePage = window.location.href; const navLinks = document.querySelectorAll("nav .custom-menu-class ul li a"); navLinks.forEach((mylink) => { if (mylink.href.includes(`${activePage}`)) { mylink.classList.add("active-menu"); } });Funciona en "http://localhost/mysite/pizza", pero no funciona en "http://localhost/mysite/pizza/page/2"
Aquí va mi código de menú en php:
<nav class="menu"> <div class="custom-menu-class"> <ul> <a href="<?php echo get_page_link(724);?>"><li><?php echo get_the_title(724);?></li></a> <a href="<?php echo get_page_link(726);?>"><li><?php echo get_the_title(726);?></li></a> <a href="<?php echo get_page_link(724);?>"><li><?php echo get_the_title(728);?></li></a> </ul> </div>¿Alguien sabe qué estoy haciendo mal? Muchas gracias por su atención.
Cuando examino su código, el primer problema que veo está aquí:
const navLinks = document.querySelectorAll("nav .custom-menu-class ul li a");Ya que ha definido la jerarquía como
nav > .custom-menu-class > ul > a > lino puede obtener los elementos de menú relacionados en su Javascript con
"nav .custom-menu-class ul li a"para deshacerse de este problema, simplemente puede eliminar el "li" y escribirlo como:
"nav .custom-menu-class ul a"Aparte de eso, para ver qué está pasando al hacer coincidir las URL de su página con "window.location.href", simplemente puede generar las variables y compararlas. Para hacer esto, una vez que cree su variable activePage, imprímala en su consola con
console.log(activePage);y verifique si coincide con los enlaces de su página.