Как оставить focus рабочим только для меню?

Question

[harve]

Добрый день. Имеется такое: https://codepen.io/noddes/pen/LYoZjQB

Справа ссылки. Если по ним нажимать, то выбранная ссылка подчеркивается, но если кликнуть в любом месте страницы(или вообще произвести любые действия), то подчеркивание слетает. Как это исправить? Знаю, что можно кастомный андерлайн прикрутить, но интересует данный вариант.

Comments

[Сергей delphinpro]

https://ru.wikipedia.org/wiki/Проблема_XY
Уверены, что речь о фокусе?

[imko]

Запрет всем элементам страницы фокуса звучит как очень плохая идея

Answer 1

[Алексей Уколов]

Нужно назначать кликнутой ссылке отдельный класс, который бы обозначал её активность.
Это делает на основании адреса страницы либо бэкенд при генерации шаблона, либо JS, если это SPA.

В представленной песочнице это может выглядеть примерно так:

.nav ul li a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .1em;
}

const $links = document.querySelectorAll('.nav a');

Array.from($links).forEach(($link) => {
  $link.addEventListener('click', (event) => {
    document.querySelector('.nav a.active')?.classList.remove('active');
    event.target.classList.add('active');
  })
});

Comments

[harve]

Большое спасибо! То, что я хотел. Подскажите, пожалуйста, на данный момент подчеркивание срабатывает с классом ".nav a", а как добавить еще один класс, например, чтобы срабатывало между ними (3мя ссылками) и лого у которого другой класс.

UPD: Разобрался сам. Спасибо еще раз!