Estoy creando un sitio web en Wordpress y necesito agregar una clase al elemento de anclaje que se encuentra dentro de un elemento de la lista. El elemento de la lista tiene una identificación única. La clase que necesito agregar me dará un desplazamiento suave en el enlace de anclaje.
No quiero alterar el tema, por eso quiero agregar una clase con JavaScript, o alguna técnica mejor.
Esto es lo que he intentado pero no funciona:
$('li#menu-item-318').find('a').addClass('fl-scroll-link');En mi consola me sale este error:
TypeError: $ is not a function. (In '$("#menu-item-318 a")', '$' is undefined) Error: {}Este es el código específico en mi sitio web:
<nav class="top-bar-nav"><ul id="menu-topbalk"><li id="menu-item-318"><a href="#contactgegevens" class="nav-link">Contact</a></li></ul></nav>Entonces, la etiqueta anterior debe obtener esta segunda clase: fl-scroll-link para que este sea el resultado:
<a href="#contactgegevens" class="nav-link fl-scroll-link">Contact</a>Estoy aprendiendo todos los días y me vendría bien tu ayuda. Explique la solución que propone.
// Solución //
¡Muchas gracias a todos, juntos lo hicimos funcionar! ¡Hurra!
Así que cometí 2 errores:
El código de trabajo es:
jQuery(document).ready(function($) { $("#menu-item-318 a").addClass("fl-scroll-link"); });Gracias de nuevo, estoy muy feliz!
Falta un cierre en el elemento de su lista (o faltaba)
<nav class="top-bar-nav"> <ul id="menu-topbalk"> <li id="menu-item-318"> <!-- missing ">" here --> <a href="#contactgegevens" class="nav-link">Contact</a> </li> </ul> </nav> Para agregar la clase fl-scroll-link a un ancla, use el método .addClass() . Aplique esto a todos los elementos secundarios <a> debajo del menú como se muestra a continuación. Como ya estás usando jquery, también lo he usado.
jQuery(document).ready(function($) { $("#menu-item-318 a").addClass("fl-scroll-link"); });Además, si realmente desea acceder a él por su valor href de anclaje, hay otra pregunta que ya ha respondido aquí: ¿Cómo obtener un elemento por su href en jquery?
En tu caso:
jQuery(document).ready(function($) { $('a[href="#contactgegevens"]').addClass("fl-scroll-link"); }); El mensaje de error acerca de que "$" no está definido significa que su biblioteca jquery no se está cargando. Querrá asegurarse de que su javascript personalizado se agregue DESPUÉS de que el sitio cargue jquery ... o debajo es una forma pura de javascript de agregar una clase a esa etiqueta <a> .
document.querySelector('a[href="#contactgegevens"]').classList.add("fl-scroll-link"); o si desea aplicar esa clase a todas las etiquetas <a> debajo del elemento de la lista.
document.querySelector('#menu-item-318 a').classList.add("fl-scroll-link");