Есть калькулятор кухонь, при выборе определенных данных расчитывается стоимость заказа. Отображается только 1-ый шаг, всем остальным задан display:none; . Разметка примерно такая:
<div class="calculation">
<div class="step1"><input type="submit"></div>
<div class="step2"><input type="submit"></div>
<div class="step3"><input type="submit"></div>
<div class="step4"><input type="submit"></div>
<div class="step5"><input type="submit"></div>
<div class="step6"><input type="submit"></div>
<div class="step7"><input type="submit"></div>
</div>
Нужно сделать так, чтобы при клике на кнопку калькулятор просто переходил к следующему шагу без какого-либо расчета стоимости и без перезагрузки страницы, т.е. чтобы предыдущий блок принимал значение display:none; , а следующий display:block;.
Разметка примерно такая:
Тогда ответ примерно такой: в моей практике был задействован плагин для jQuery который называется dm-tabs.js
Однако я бы не стал его подключать. Подобная задача решается тривиально на коленке за 15-60 минут хоть на чистом javascript. Ссылка как пример от чего отталкиваться.
PS: Насколько могу судить, это техническое сообщество. Здесь не интересует такое понятие как "калькулятор" "кухонь" когда суть вопроса - как последовательно поменять display на множестве блоков HTML. Поэтому был -1 (не от меня)
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости