Add active class to current element with JS (not Jquery)

Question

What would be the best way to add the active class to an "active/current" element with PLAIN JavaScript?

With jQuery you would use the typical:

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

But with JavaScript (not vanilla JS, jQuery, etc)??

Heres my fiddle: http://jsfiddle.net/meEf4/2065/

querySelectorAll loops addEventListener, classList – epascarello Sep 12 '17 at 11:40 — epascarello, Sep 12 '17 at 11:40
can you show me? thanks! with a fiddle?=) – Angie R Sep 12 '17 at 11:41 — Angie R, Sep 12 '17 at 11:41
@AngieR check my answer, it is exactly what you need – Ankit Agarwal Sep 12 '17 at 11:47 — Ankit Agarwal, Sep 12 '17 at 11:47
"vanilla JS" is the same as "plain JavaScript". – bfontaine Sep 12 '17 at 13:21 — bfontaine, Sep 12 '17 at 13:21

score 2 · Accepted Answer · edited Oct 27 '18 at 07:17

2

You can first get the element that has active class. Since there will be only one <a> with active class so you can directly access the <a> Now replace that active class will no text. Finally, add the active class to the clicked <a> element.

First attach a click handler to all the <a> tags:

const navAnchor = document.querySelectorAll('a');

navAnchor.forEach(anchor => {
  anchor.addEventListener('click', addActive);
})

Now, create a function addActive as below:

function addActive(e) {
  const current = document.querySelector('.active');
  current.className = current.className.replace("active", "");
  e.target.className += "active";

}

edited Oct 27 '18 at 07:17

jaber

3
4

answered Sep 12 '17 at 11:46

Ankit Agarwal

30,378
5
37
62

But now you're using jQuery.. except for the methods – Angie R Sep 12 '17 at 11:48
1

Ok, i have edited my answer. Check now – Ankit Agarwal Sep 12 '17 at 11:54

Add active class to current element with JS (not Jquery)

1 Answers1