@1canada

Как заменить контент по клику?

Есть айтем, в нем есть кнопка, которая должна менять контент.
5f42dacc35364060701095.png

Заменить:
<div class="catalog__content">
<div class="catalog__image"><img src="img/catalog/clock.png" alt=""></div>
<div class="catalog__name"><h3>Пульсометр Polar FT1</h3></div>
<div class="catalog__description"><p>Для первых шагов в тренировках основанных на сердечном ритме</p></div>
<div class="catalog__link"><a href="#">Подробнее</a></div>
<div class="catalog__footer">
<div class="catalog__price">
<div class="catalog__price-old"><strike>4 750 руб.</strike></div>
<div class="catalog__price-new"><span>4 500 руб.</span></div>
</div>
<div class="catalog__button"><button class="catalog__btn-price btn">Купить</button></div>
</div>


На:
<div class="catalog__content-back">
<ul class="catalog__features-list">
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li>Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
</ul>
<div class="catalog__link"><a href="#">Назад</a></div>
</div>
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега JavaScript
Dance Gavin Dance - Prisoner
Особо заморачиваться не стал и набросал простой вариант:



При желании уже сами сможете подкрутить под себя.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
HistoryART
@HistoryART
Надзиратель
Готовое не дам, а вот при помощи этого вы добьётесь нужного результата:

1. Event target
2. onclick
3. querySelector
Ответ написан
@LJ322
Добавьте соответствующие модификаторы для блоков и добавляйте/удаляйте их через обработчик: https://developer.mozilla.org/ru/docs/Web/API/Even...
Ответ написан
Simply1993
@Simply1993
Frontend developer
Можете сразу оба блока положить в карточку, но у одного будет display: block, а у другого display: none и по нажатию на "Подробнее"/"Назад" просто меня их на "противоположное" значение.

Или вместо этого можете поиграться с анимацией opacity и будет плавно появляться/скрываться.
Ответ написан
Ваш ответ на вопрос

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

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