Как сделать кнопки с годами, в которых менялся бы контент?

Question

[Alan Solid]

Вопрос такой, как сделать такой блок, в котором по нажатию на год, менялась красная линия снизу и менялся сам контент ( контентом будет слайдер, его я вставлю сам ). Очень нужна помощь

Comments

[Lord_Dantes]

Ну как вариант сохранять уже полученные данные в скрытых тэгах и потом просто js-ом вставлять нужные данные в основной слайдер

[Andrey Suha]

Дак это обычные табы

[Alan Solid]

s l a v e, да, я это понял, но можно какую нибудь ссылку, где покажут как это сделать или пример кода?

[Виктор]

Логика простая, щелкаете по кнопке с годом.
Задаете ей класс к примеру active, при этом у других кнопок этот класс удаляете.
У кнопки к примеру есть data-id="one". Вытаскиваете этот "one" и кладете в переменную.
К примеру let blockTabs = "one".
Нижний блок где слайдеры (одни из блоков) будет c id="one".
Делаете document.querySelector('#' + blockTabs).style.display = "block", все остальные none.
Красной полоске тоже при щелчке задаете класс 'one', который будет с помощью transition, либо через absolute, либо через transform, гонять полоску к нужному году.

[Lord_Dantes]

Alan Solid, видел подобное на сайте https://keeplife.org/

Answer 1

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

Это обычная табуляция.
Если хочешь минимум заморачиваться, заюзай какой-то JS -фреймворк, который позволит хранить состояние.
Либо выводи шаблонизатором от бэка + табы от бута.

В любом случае это вывод циклом, сортированным по году. Ничего сложного.

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