Quiero tener un Menú con elementos activos en mi sitio web. Se debe agregar una clase para activar el elemento. Dado que el proyecto tiene URL crípticas, las soluciones basadas en URL no son posibles. El texto del elemento de menú respectivo se muestra en el título de la página respectiva.
Mi idea era comparar el título de página id="navtopheader" con el texto en el elemento del menú. Si es igual, agregue la clase menuactive al elemento de menú respectivo.
Mi HTML se ve básicamente así:
<div id="navtopheader" class="navtopheader">menu item 1</div> ... <div class="nav_ebene_2"> <p>menu item 1</p> </div> <div class="nav_ebene_2"> <p>menu item 2</p> </div> ...Puedo hacerlo en realidad de una manera ineficiente:
var headertext = document.getElementById("navtopheader").innerText var menutext0 = document.getElementsByClassName("nav_ebene_2")[0].innerText var navlist = document.getElementsByClassName("nav_ebene_2"); if (headertext == menutext0) { navlist[0].classList.add("activemenu"); } var menuitem1 = document.getElementsByClassName("nav_ebene_2")[1].innerText if (headertext == menuitem1) { navlist[1].classList.add("activemenu"); } ...Pero dado que la cantidad de elementos del menú varía en el sitio web, recibiría un mensaje de error si incluyo demasiados o muy pocos elementos del menú.
¿Existe una solución adecuada? Lo intenté todo el día pero no resolví el problema. ¡Gracias!
Iterar sobre la colección de <p> s que son hijos de nav_ebene_2 . Cuando se encuentra una coincidencia, agregue la clase a su padre.
const headerText = document.querySelector('#navtopheader').textContent; for (const p of document.querySelectorAll('.nav_ebene_2 p')) { if (p.textContent === headerText) { p.parentElement.classList.add('activemenu'); } }