Выделение ссылки/кнопки при переходе (переключение языка)

Question

Друзья, подскажите как реализовать выделение кнопки/ссылки. по умолчанию украинская версия сайта, мультиязычность реализована через папки /ru/index.html

Проблема именно чтобы выбраная версия подсвечивалась при загрузке соответствующей версии. Средствами css я так понимаю это не реализовать.

пример на скрине ниже

 <div>
        <button class="btn"><a href="/index.html">UA</a></button>
        <button class="btn"><a href="/ru/index.html">RU</a></button>
 </div>

Спасибо заранее за помощь

Answer 1

Код добавляет для body класс .ua или .ru, если в url страницы отсутствует /ru/ или присутствует соответственно.

const docRef = window.location;
let addClass = /\/ru\//.test(docRef) ? 'ru' : 'ua';
document.body.classList.add(addClass);

body {
  font-family: sans-serif;
}

.lang {
  color: #aaa;
  font-weight: 600;
}

.lang span:not(:last-child)::after {
  content: '\a0|';
  font-weight: normal;
}

.ua .ua,
.ru .ru {
  color: #222;
}

<div class="lang">
  <span class="ua">UA</span>
  <span class="ru">RU</span>
</div>

БЛОГ НА HUSL

Выделение ссылки/кнопки при переходе (переключение языка)

Ответы (1 шт):