Vanilla Javascript - 向元素1添加类，并在单击元素1时从元素2中删除类

Question

I've been told I can no longer use jQuery on a project I'm building, so I'm forced to use vanilla Javascript which can sometimes be way over my head. I'm hoping to simply convert this jQuery to js. I've searched and searched on Stack Overflow to no avail, but I feel like it shouldn't be that difficult. Any help would be amazing!

$('.navbuttoncontainer a').on( 'click', function() {
$('.navbuttoncontainer .current').removeClass('current');
$(this).addClass('current');

Answer 1

You could attach a click event listener to the .navbuttoncontainer element.

Then determine whether the a element was clicked by checking the tag name of the target element ( e.target ). Use the .add() / .remove() methods on the classList property of the element in order to add/remove the class.

 document.querySelector('.navbuttoncontainer').addEventListener('click', function (e) { var target = e.target; if (target.tagName === 'A') { e.currentTarget.querySelector('.current').classList.remove('current'); target.classList.add('current'); } }); 

 .current { color: #f00; } 

 <div class="navbuttoncontainer"> <a class="current">Initially current item</a> <a>Second item</a> <a>Third item</a> </div> 

Answer 2

All modern browsers have support for document.querySelector / document.querySelectorAll , which are essentially the same thing as the jQuery $ function.

(For supported browser info check out http://caniuse.com/#feat=queryselector .

Instead of calling addClass / removeClass on a jQuery object, the DOM API exposes a property of elements called className . This is same as the class attribute on an element:

this.className = 'current';

Lastly, event handlers are registered with the addEventListener function. The arguments are the event name and the event handler function.