Как правильно сделать шаги в калькуляторе?

Всем привет. Как правильно реализовать шаги в таком калькуляторе? Пока идея добавлять шагам display: none; но я не знаю на сколько такое решение верно.
25a1f17e95f74ec88d0f04474ea34b2a.PNG
  • Вопрос задан
  • 878 просмотров
Решения вопроса 1
@LiguidCool
1) По моему вы пытаетесь изобрести "колхоз".
2) Есть реально МНОГО реализаций Tab'ов. Например Boostrap или Semantic. Или у Semantic есть вообще Step, который для того и придуман. Ну и много чего на JQuery - гугл в помощь.
3) Подобные калькуляторы !!! ОЧЕНЬ ПЛОХАЯ ИДЕЯ ДЕЛАТЬ ХАРДКОДОМ !!!. Поддерживать потом или что-то менять - превращается в филиал ада, ибо в 99% у вкладок начнут появляться зависимости. Если это у вас не задача из серии сделал-забыл, то я бы советовал сделать компонент на React или Vue. Заодно их изучение сподвигнет вас не писать JS говнокод.
4) Если все же задача "срочно, просто, без запары" и использовать UI библиотеку не хочется, то да:

Пока идея добавлять шагам display: none;

можно так.
Всем вкладкам назначается класс (например tab), они не видимы. При клике на шаг у всех вкладок удаляется класс active и через this устанавливается тому, на котором был клик.
jsfiddle.net/syahrasi/Us8uc - простейший пример реализации.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы