Как лучше сделать?

Question

[kablihin]

Делаю верстку макета, есть вот такой элемент:

Как его лучше сверстать? Думаю сделать какой-то слайдер, но опять же не знаю какой взять, а свой писать не очень хочется. Использую чистый js, без фреймворков.

Comments

[Сергей delphinpro]

ищите вкладки/табы. слайдер здесь не нужен.

[Вадим]

если страница одна и та же, то это табы (tabs).
В гугле 100500 решений.

На глаз - дизайн лажа, так как всё будет прыгать туда сюда при переключении от одного пункта к другому из-за того что меняется размер активного пункта и остальные сдвигаются относительно его.
Но, возможно, это так кажется из-за того, что Вы скрины при разном уровне зума сделали.

[kablihin]

Сергей delphinpro, Окей, спасибо

[kablihin]

Вадим, Да, зум разный. Но и макет лажа, студенческий, с факультета дизайна)

[Сергей delphinpro]

Вадим, transform:scale для активного пункта, и ничего не будет прыгать.
дизайн лажовый, тут не поспоришь.

[Вадим]

Сергей delphinpro, Внимательнее посмотрите. Там так не выйдет.
Чтоб можно было этим воспользоваться, должно быть другое расстояние между не активными элементами.
Накостылить думаю всегда найдётся вариант, правда, не вижу смысла это вообще обсуждать.

[Сергей delphinpro]

Вадим, да, верно.. ну хз.

Answer 1

[Арсений Матыцин]

Решения:
1. Грубо и тупо — сохранить идентификатор блоков, соотнести с навигацией и при клике по навигации врубать display:none всем, кроме активного.
2. Разбить информацию логически (контент) и отрисовывать тогда, когда выбран пункт навигации (createEleemnt и т.д.)
3. Актуальный — пункт два в реализации на каком-нибудь фреймворке или библиотеке (React, Vue).

Comments

[imko]

а грубо но поумнее?) сделать перебиралку которая по связи кнопочки с контентом будет решать кому врубать display none. По порядку или по значению какого-нибудь атрибута