1) Возможно у табов и контента есть один родитель, какой-нибудь
.services, тогда лучше через родителя искать детей
let tabsWrapper = document.querySelector('.services');
let tabsBtn = tabsWrapper.querySelectorAll('.services__tabs-item');
let tabsContent = tabsWrapper.querySelectorAll('.services__item');
Если всё-таки нет общего родителя, то можно закешировать document. Это всё делается для минимизации трогания DOM, чем меньше тем лучше.
2) Вы в цикле проходитесь по табам и вешаете слушателей. Это не самый лучший вариант, лучше было бы делегировать событие -
подробнее тут. По факту вы всегда вешаете одного слушаетеля, а не сколько-то в завимисость от того сколько табов.
3) Если уж es6, то до конца. Применяйте стрелочные функции.
tabsBtn[i].addEventListener('click', evt => {
evt.preventDefault();
compareIndex(i);
});
4) Не сокращайте название переменных (куда вы деваете время, которое сэкономили на напечатание). Сокращением пускай занимаются роботы - минификаторы, обфускаторы - Вы пишите для людей
evt => event
tabBtn => tabButton
etc.
5) при каждом клике Вы зачем-то проходитесь по всем табам, хотя активным может быть только один таб. Сохраняйте активный таб и как только кликаете на новый, с активного убираете css-классы, а после назначаете кликнутый таб активным.
