Меняем цвет текста и фона при клике на текст

В исходном примере выбранный текст становился белым на чёрном фоне, а остальные варианты возвращались к чёрному на белом. Для такого действия используйте кнопки: они доступны с клавиатуры. Класс состояния проще поддерживать, чем менять отдельные inline-стили.

<div id="options">
  <button type="button" class="span-option" aria-pressed="false">SPAN1</button>
  <button type="button" class="span-option" aria-pressed="false">SPAN2</button>
  <button type="button" class="span-option" aria-pressed="false">SPAN3</button>
</div>

.span-option { border: 1px solid black; padding: 8px; color: black; background: white; }
.span-option.selected { color: white; background: black; }

const options = [...document.querySelectorAll('#options .span-option')];
options.forEach(option => option.addEventListener('click', () => {
  options.forEach(item => {
    const selected = item === option;
    item.classList.toggle('selected', selected);
    item.setAttribute('aria-pressed', String(selected));
  });
}));

Скрипт подключите после разметки или с defer. Первая часть цикла снимает выбор с остальных кнопок, вторая ставит выбранной CSS-класс. Область ограничена #options, поэтому другие кнопки страницы не затрагиваются.

Проверенные источники

developer.mozilla.org. Проверено 10 октября 2026 года.