Где элементы находятся, что за элементы, и какой класс будем им добавлять/убирать:
const container = document.querySelector('nav');
const itemSelector = '.sidebar-item';
const activeClass = 'selected';
Вариант раз, делегируем обработку клика контейнеру. При клике ищем элемент с нужным классом, снимаем класс, устанавливаем класс кликнутому:
container.addEventListener('click', e => {
const item = e.target.closest(itemSelector);
if (item) {
const activeItem = e.currentTarget.querySelector(`.${activeClass}`);
if (activeItem) {
activeItem.classList.remove(activeClass);
}
item.classList.add(activeClass);
}
});
Вариант два, тоже с делегированием. Перебираем все элементы, переключаем класс в зависимости от того, является ли текущий элемент кликнутым:
container.addEventListener('click', function({ target: t }) {
if (t = t.closest(itemSelector)) {
for (const n of this.querySelectorAll(itemSelector)) {
n.classList.toggle(activeClass, n === t);
}
}
});
Вариант три, назначаем обработчик клика каждому элементу индивидуально, перебираем элементы аналогично предыдущему варианту:
const items = container.querySelectorAll(itemSelector);
const onClick = e => items.forEach(n => n.classList.toggle(activeClass, n === e.currentTarget));
items.forEach(n => n.addEventListener('click', onClick));
Вариант четыре, обработчик клика назначается как и в предыдущем, но, как и в первом варианте, будем убирать класс у активного элемента и добавлять кликнутому:
container.querySelectorAll(itemSelector).forEach(function(n) {
n.addEventListener('click', this);
}, function(e) {
this[0] && this[0].classList.remove(activeClass);
e.currentTarget.classList.add(activeClass);
}.bind(container.getElementsByClassName(activeClass)));
