Te agradecería si me ayudas con esto, no lo puedo resolver. Estoy tratando de crear una función: "si alguna sección tiene una clase "activa" => tome la identificación de esta sección y luego agréguela al cuerpo como un elemento de clase; de lo contrario, elimínela"
Este es el código a continuación, pero no funciona correctamente o cuando me desplazo a la siguiente sección, no se agrega una nueva clase y se elimina la anterior.
<body class=""> <section id="home" class="active"> </section> <section id="about" class=""> </section> </body> if ($('section').hasClass('active')) { var dataSection = $('section').attr('id'); $body.addClass(dataSection.replace('#', '') + '-active'); } else { $body.removeClass('home-active'); }Intenta usar this aquí.
if( $(something).hasClass("active") ){ var grabId = $(this).attr("id"); $("body").attr("id", grabId); }Cuando usa $('section').attr('id') que siempre devolverá la id de la primera sección, debe usar this dentro de la section en:
$('section').attr('id');Debiera ser :
$(this).attr('id');Por lo tanto, obtendrá la identificación de la sección actual. Además, no es necesario reemplazar, ambas líneas podrían combinarse para:
$body.addClass($(this).attr('id') + '-active');NOTA: Siempre puede obtener la sección activa usando solo un selector como:
$('section.active')Espero que esto ayude.
En realidad $('section').attr('id') le dará el atributo id sin # , puede usarlo directamente, puede ver la class cuerpo cambiada en consecuencia en la siguiente demostración:
if ($('section').hasClass('active')) { $("body").addClass($('section').attr('id') + '-active'); } else { $("body").removeClass('home-active'); } console.log($("body").attr('class')); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body class=""> <section id="home" class="active"> </section> <section id="about" class=""> </section> </body>Nota:
Tenga en cuenta que está usando $body que no ha declarado, use $("body") en su lugar para hacer referencia al cuerpo del documento.