Активная вкладка на js
 

Есть код, который вроде как должен присваивать class='active' элементу 'li' с class='leftlinks' при клике по нему, а с остальных элементов с class='leftlinks' убирать class='active', но не присваивает. Где косяк?

var menuItems = document.getElementsByClassName('leftlinks');
var onClick = function (event) {
 event.preventDefault();
  
  for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].classList.remove('active');
 }
  
  event.currentTarget.classList.add('active');
};

for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', onClick, false);
}

<ul id="menu">
			<li class="leftlinks">
				<div><img src="/img/1.png" alt="" width="28" height="28"></div>
				<a class="historyAPI" href="#">вкладка 1/a>
			</li>
			
			<li class="leftlinks">
				<div><img src="/img/2.png" alt="" width="28" height="28"></div>
				<a class="historyAPI" href="#">вкладка 2</a>
			</li>
			
			<li class="leftlinks">
				<div><img src="/img/3.png" alt="" width="28" height="28"></div>
				<a class="historyAPI" href="#">вкладка 3</a>
			</li>
</ul>

veg,
DOMContentLoaded