Нашел решение, вся трудность была в том чтоб NodeList преобразовать в массив. Кому интересно вот решение:
<!DOCTYPE html>
<html>
<head>
<title>лишки</title>
<style>
.nav-list__item {
cursor: pointer;
background-color: yellow;
color: green
}
.nav-list {
width: 150px;
}
.nav-list__item-blue {
color: blue;
background-color: orangered;
}
</style>
</head>
<body>
<ul class="nav-list">
<li class="nav-list__item nav-list__item-blue">Пункт меню</li>
<li class="nav-list__item">Пункт меню</li>
<li class="nav-list__item">Пункт меню</li>
<li class="nav-list__item">Пункт меню</li>
<li class="nav-list__item">Пункт меню</li>
</ul>
<script>
var link = document.querySelectorAll(".nav-list__item");
var linkArray = Array.prototype.slice.call(link);
linkArray.forEach(function(item, index, array){
linkArray[index].addEventListener("click", function(event) {
event.preventDefault();
console.log("клик по пункту меню" + [index]);
if (!link[index].classList.contains("nav-list__item-blue")) {
link[index].classList.add("nav-list__item-blue");
for (i=0; i < linkArray.length; i++) {
if (i !== index) {
link[i].classList.remove("nav-list__item-blue");
}
}
} else {
link[index].classList.remove("nav-list__item-blue");
}
});
});
</script>
</body>
</html>