Как реализовать вот такой блок?

Question

[Анатолий Саламатин]

Всем привет. Помогите пожалуйста. как реализовать вот такой блок? take.ms/k3KVz Чтобы просто переключалось все правильно. Мышкой таскать не надо

Заранее спасибо!

Comments

[youtubehomer]

oleghtml: так сложно точку убрать

[oleghtml]

youtubehomer: не заметил) извиняй)

[Ростислав Игнатенко]

Я бы сделал через связь input[radio] совмесно с label. Инпут бы скрыл, а визуализацию всю строил в лейбле. Для текущего активного радио задавал бы класс, в котором был бы этот белый круг с синей обводкой. Получал индекс текущего выбранного, всем предыдущим радио добавил бы класс который бы задавал синюю полоску и синий круг. Так же по индексу находился блок с текстом и задавался ему белый background.

Answer 1

[Danila]

можно упороться и сделать на цсс https://codepen.io/DNLHC/pen/dWRbGV?editors=1100
но лучше на жс, реализация аналогичная, только работаешь с классами