If section has class active then add it's id to body as a class?

Question

I would be grateful if you help with this thing, I can't resolve. I am trying to create a function: "if any section has class "active" => take this section's id then add it to body as a class element otherwise remove"

This the code below, but it's not working properly or when I scroll to next section new class is not being added and previous one removed.

<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');
}

`.replace()` call is not necesary, `.id` property does not include `"#"` character — guest271314, Apr 13 '17 at 16:16
`$body.addClass($(this).attr('class'))` instead of `$body.addClass(dataSection.replace('#', '') + '-active');` — Lixus, Apr 13 '17 at 16:17
Do you have your `$body` variable defined somewhere or did you intend to use `$('body')`? — Viliam Aboši, Apr 13 '17 at 16:18
When is `if..else` used? `$('section').hasClass('active')` would only query and return `Boolean` result of first `
` element — guest271314, Apr 13 '17 at 16:19
@HAJIHASHIMOV Can you include full `html`, `javascript` at Question, create stacksnippets to demonstrate? See http://stackoverflow.com/help/mcve — guest271314, Apr 13 '17 at 16:24
@Lixus but i want to add the class itsself + -active to the body, for example home-active !? — HAJI HASHIMOV, Apr 13 '17 at 16:26

score 2 · Answer 1 · answered Apr 13 '17 at 16:24

2

Try using this here.

if( $(something).hasClass("active") ){
    var grabId = $(this).attr("id");
    $("body").attr("id", grabId);
}

answered Apr 13 '17 at 16:24

r0u9hn3ck

553
4
11

Thank you this worked as well:), but my question was that when second section is active that id + active is not added to Body. still trying to test different variants but won't work :( – HAJI HASHIMOV Apr 13 '17 at 17:07

Zakaria Acharki · Answer 2 · 2017-04-13T16:38:27.417

1

When you use $('section').attr('id') that will always return the id of the first section, You need to use this inside of section in :

$('section').attr('id');

Should be :

$(this).attr('id');

So it will get the id of the current section, Also no need for the replace the both lines could be combined to :

$body.addClass($(this).attr('id') + '-active');

NOTE : You could always get the active section using just selector like :

$('section.active')

Hope this helps.

edited Apr 13 '17 at 16:38

answered Apr 13 '17 at 16:24

Zakaria Acharki

66,747
15
75
101

it kind of worked but it says undefined-active and when scroll to for example about section => the about-active is being added to body? maybe its because of $this or ? – HAJI HASHIMOV Apr 13 '17 at 16:32
Yes, my bad `$('this')` should be `$(this)` (post updated). – Zakaria Acharki Apr 13 '17 at 16:39
Thank you it worked :), but my question was that when second section is active that id + active is not added to Body. still trying to test different variants but won't work :( – HAJI HASHIMOV Apr 13 '17 at 17:06

score 1 · Answer 3 · answered Apr 13 '17 at 16:56

Actually $('section').attr('id') will give you the id attribute without # you can use it directly, you can see body class changed accordingly in the folowing Demo:

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>

Note:

Note that you are using $body which you haven't declared, use $("body") instead to refer document body.

Thank you it worked :), but can't add another class to body after second section got active. — HAJI HASHIMOV, Apr 13 '17 at 17:08
@HajiHashimov The actual code is only triggering on document load, you have to recall it whenever you change any section. — cнŝdk, Apr 13 '17 at 17:16

If section has class active then add it's id to body as a class?

3 Answers3