Как сверстать такой элемент?

Question

[aliasst]

Подскажите как сверстать такую вещь? Нужно чтобы при нажатии на кнопки (tab 1, tab 2, tab 3) менялся их стиль (на оранжевый) и чтобы новый стиль сохранялся до того момента пока не нажата другая кнопка. Также нужно чтобы каждой кнопке соотвествовал свой текст в блоке левее.

По умолчанию должна быть "нажата" первая кнопка и выведен соответствующий ей текст..

Answer 1

[Ivan Bogachev]

такую вещь

такая вещь называется tabs. Вам стоит сходить на codepen и посмотреть примеры, там народ как только не изгаляется: и на чистом CSS, и на скриптах, и с поддержкой wai-aria, и без. В вашем случае этот элемент повернут набок вместо традиционного для него горизонтального положения.

Answer 2

[skosterin88]

Делал нечто похожее раньше.
Пример того, как это делается: codepen.io/skosterin88/pen/oYmPbW
Я делал это для другого проекта, соответственно, названия стилей сохранились оттуда.
nav-ul-li - меню, div с классом services-data - обертка для содержимого таба. Выделенному по умолчанию элементу меню задаем класс service-menu-item-active.
services-info - это описание отдельного элемента. Для элементов данного класса по умолчанию задаем свойство display:none. Тому, что отображается по умолчанию, задаем отдельный класс service-info-visible.
Отображение разных табов при нажатии разных кнопок задается уже через JavaScript.

Comments

[aliasst]

спасибо! благодарю! то что надо!)