How can a class be added to a div with an id

Question

I two pages home.html and service.html. On the home page when this link a href="services#v-pills-manpower" is clicked on, I want to add show active class to the div on the service page with the id #v-pills-manpower.

This is the html in my service.html

<div class="tab-pane fade show active" id="v-pills-services"></div>

<div class="tab-pane fade" id="v-pills-manpower"></div>

This is the javascript

var hash = document.location.hash;
var pills = document.querySelectorAll('*[id]');

if($.inArray(hash, pills)) {
    // console.log(hash + 'is in IDs array');
    // Add show active class to the div with the hash id
}

How can i achieve my goal?

You can use `document.querySelector(location.hash)` to get the element that has that ID (if any). — Titus, Jan 21 '18 at 20:07
Possible duplicate of [How do I add a class to a given element?](https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — Zze, Jan 21 '18 at 20:33

score 2 · Accepted Answer · 2018-01-21T20:51:57.330

2

Use classList to add, remove, or toggle classes:

// single item
document.getElementById('some-id').classList.add('show')

// multiple items
let elements = document.querySelectorAll('*[id]')

for (let i of elements) {
    elements[i].classList.add('show')
}

For your example use the hash as the selector:

let sel = document.location.hash.substr(1)
document.getElementById(sel).classList.add('show')

edit: if you're going to downvote at least have the courtesy to give an explanation as to why.

edited Jan 21 '18 at 20:51

answered Jan 21 '18 at 20:08

I'm getting the error `Cannot read property 'classList' of null` – Mena Jan 21 '18 at 20:20
That means your selector is wrong. I've updated with a possible a fix – Jan 21 '18 at 20:24
I'm able to see the div when i `console.log(sel)` but I still get the same error when i try to add the class, stiil think the selector is wrong? – Mena Jan 21 '18 at 20:32
1

`document.location.hash` starts with `#`. You should use something like `let sel = location.hash.substr(1)`. – Titus Jan 21 '18 at 20:32
I'm obviously doing something wrong as the error won't go away. Is it possible that not removing the active class `show active` class from the first div could cause the error? I basically using your code and still get the error – Mena Jan 21 '18 at 20:42
Try this: in the web inspector console enter `document.getElementById("v-pills-manpower")`. Does it find the element you expect? – Jan 21 '18 at 20:43
@Mena You're probably trying to access that element before it is added to the DOM. Make sure the page is completely loaded before your code is executed. – Titus Jan 21 '18 at 20:44
I was getting the error because my link was wrong `services#manpower` instead of `services#v-pills-manpower`. Now it failing to execute because i'm trying to add 2 classes like this `show active` so it's complaining about the space in between. How can i add more than one class in one statement? – Mena Jan 21 '18 at 20:54
1

separate the classes with commas like `div.classList.add("foo", "bar");` – Jan 21 '18 at 20:55
That was the miracle i needed. – Mena Jan 21 '18 at 21:04
I didn't downvote, so I can't advise on why anyone may have done that. But it is worth noting that OP is already using jQuery, so a jQuery solution will often result in simpler code than the direct DOM operations. For example if you did need to select multiple elements and add a class to each, you could do that without any loop at all. The code would be the same as I posted for a single element selected with `location.hash`, just using a different selector. – Michael Geary Jan 22 '18 at 00:32

ild flue · Answer 2 · 2018-01-21T20:13:22.637

0

Please refer to the answer here Change an element's class with JavaScript

To add an additional class to an element: To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

In your case, it should be:

document.getElementById("v-pills-manpower").className += " show active";

If you are using Bootstrap, the default class for showing a tab / pill should be: fade in active.

edited Jan 21 '18 at 20:13

answered Jan 21 '18 at 20:08

ild flue

1,323
8
9

Yes I'm working with bootstrap but I'm also getting the error `Cannot read property 'className' of null` – Mena Jan 21 '18 at 20:26

Michael Geary · Answer 3 · 2018-01-21T21:14:05.420

Since you're using jQuery, you can easily do this with one simple line of code:

$(location.hash).addClass( 'show active' );

You don't need to create an array of elements and search it, because what you're matching on is the element id. location.hash happens to be in the format for a jQuery id selector: "#the-id", so you can use it directly.

So $(location.hash) gives you a jQuery object with your element in it. Then .addClass() adds the classes. You can also use .removeClass() to remove classes.

How can a class be added to a div with an id

3 Answers3