Как его лучше сверстать? Думаю сделать какой-то слайдер, но опять же не знаю какой взять, а свой писать не очень хочется. Использую чистый js, без фреймворков.
если страница одна и та же, то это табы (tabs).
В гугле 100500 решений.
На глаз - дизайн лажа, так как всё будет прыгать туда сюда при переключении от одного пункта к другому из-за того что меняется размер активного пункта и остальные сдвигаются относительно его.
Но, возможно, это так кажется из-за того, что Вы скрины при разном уровне зума сделали.
Сергей delphinpro, Внимательнее посмотрите. Там так не выйдет.
Чтоб можно было этим воспользоваться, должно быть другое расстояние между не активными элементами.
Накостылить думаю всегда найдётся вариант, правда, не вижу смысла это вообще обсуждать.
Руководитель frontend направления, предприниматель
Решения:
1. Грубо и тупо — сохранить идентификатор блоков, соотнести с навигацией и при клике по навигации врубать display:none всем, кроме активного.
2. Разбить информацию логически (контент) и отрисовывать тогда, когда выбран пункт навигации (createEleemnt и т.д.)
3. Актуальный — пункт два в реализации на каком-нибудь фреймворке или библиотеке (React, Vue).
а грубо но поумнее?) сделать перебиралку которая по связи кнопочки с контентом будет решать кому врубать display none. По порядку или по значению какого-нибудь атрибута