Tengo un sitio web donde cada sección se muestra como un panel de pantalla completa. Me gustaría diseñar todos los demás elementos de la página de acuerdo con el panel que se muestra. Por ejemplo, si el panel con la clase .style-reality-green-bg está activo, me gustaría diseñar la navegación y otros elementos para complementar el verde.
Actualmente, cuando se desplaza, el panel de pantalla completa tiene una clase constante llamada .onepage-section. Cuando se desplaza entre los paneles, se agrega una segunda clase según el panel que esté actualmente en la pantalla. Esto lo maneja el tema, pero configuro las clases del panel
Por el momento tengo algunas secciones que tienen clases como...
.style-reality-green-bg .style-rebel-red-bg .style-rethink-blue-bg No puedo diseñar todos los elementos que necesito porque no son hijos de estos paneles, así que estaba tratando de encontrar una manera de agregar la misma clase al cuerpo cuando cada panel estaba activo. Entonces, si .onepage-section tiene una clase de .style-reality-green-bg agregue la clase .style-reality-green-bg al cuerpo también.
He investigado un poco, pero en su mayoría solo puedo encontrar ejemplos de acciones de 'clic'
Mi último intento es
if ($('.onepage-section').hasClass('style-reality-green-bg')) { $(this)body().addClass('style-reality-green-bg'); }Pero solo devuelve un error que dice
$ no es una función
****** EDITAR
Para aclarar
Lo que estoy tratando de lograr es...
Si el contenedor de pantalla completa tiene una clase de
.onepage-sectionY una clase de
.style-reality-green-bgagregar
.style-reality-green-bgal cuerpo, etc.
No estoy seguro si eso fue claro
La referencia al body parece estar mal formada, el código debería ser
if ($('.onepage-section').hasClass('style-reality-green-bg')) { $('body').addClass('style-reality-green-bg'); } si $ aún no está definido, ¿tiene jQuery incluido? https://jquery.com/
Su error significa que no incluye la biblioteca Jquery externa. Puede usar, por ejemplo, un cdn para incluir jquery. Agrega esta línea arriba de la etiqueta del cuerpo de cierre. Sería bueno incluir jquery antes de que llame su comando Jquery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Parece que está intentando usar jQuery pero no ha importado la biblioteca. Para eso, vea https://jquery.com/download/
Además, en su fragmento de código debe seleccionar el cuerpo con $('body') .
Alternativamente, si desea usar JavaScript estándar, puede usar el siguiente fragmento:
if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) { document.body.classList.add('style-reality-green-bg'); } Para obtener información sobre classList , consulte https://developer.mozilla.org/en-US/docs/Web/API/Element/classList