Realmente estoy enfrentando una situación compleja aquí.
He creado una página de eventos. Cada página tendrá múltiples secciones como CULTURA, COMIDA, DEPORTES y cada sección tendrá eventos. Ya configuré un sistema que tiene una etiqueta de navegación, dentro de la etiqueta de navegación tenemos ul li a[#anchor-links]. Tengo este código que buscará Div id cuando esté visible, agregará una clase activa a ese elemento de la lista.
Ahora, en la barra lateral, debajo de cada elemento li, creo 12 elementos li más durante meses. Eso MOSTRARÁ NINGUNO inicialmente y mostrará un bloque en línea cuando la madre LI tenga una clase ACTIVA. Lo que intento es encontrar todos los DIV ID durante un mes también, y compararlos con estos 12 li a[href], luego los meses en los que tenemos eventos, quiero que esos enlaces estén activos y muestren una clase especial.
Estos son ID que agregué
Cultura - #cultura . Eventos bajo cultura como #culture-jan,#culture-feb
Comida comida. Eventos bajo comida como #food-jan,#food-fed....
Este es el JQuery que estoy usando hasta ahora
<script> window.addEventListener('DOMContentLoaded', () => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute('id'); if (entry.intersectionRatio > 0) { document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active'); } else { document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active'); } }); }); // Track all sections that have an `id` applied document.querySelectorAll('div[id]').forEach((div) => { observer.observe(div); }); }); </script>
Por favor alguien, ayuda. Gracias