Смена изображения, телефона по клику на ссылку (кнопку)

04.01.2018

Здравствуйте уважаемые читатели блога Digrand.

Сегодня хочу вам показать вариант смены изображения, контента по клику на ссылку. Столкнулся я с данным вопросом в верстке одного psd макета. Идея была в том, что на картинке были кнопки, по нажатию на которые нужно было заменять под ними картинку. CSS кода всего блока выставлять не буду, т.к. запутаетесь, много лишнего для вас. Основной функционал в Javascript. Также данная фишка часто используется для смены телефонов, например по клику на город (но в таких случаях надо использовать куки, что бы при обновлении страницы данные оставались).

Сначала покажу вам демо, на примере смены телефонов и изображений. Вместо них можно использовать любой другой контент, вплоть до загрузки в iframe других страниц. Скачать готовый Javascript функционала смены изображений, телефона по клику вы сможете ниже:

Скачать: скрипт замены изображений по клику
Смена изображения, телефона по клику на ссылку (кнопку)
Скачано: 47, размер: 10 B, дата: 04.Янв.2018

Ну а далее покажу вам все более подробно.

Смена изображений по клику

1. Сначала добавляем HTML код

2. Добавляем немного JS

 

Смена телефона по клику

1. Добавляем HTML код

2. Добавляем немного JS

На этом все, выше по ссылке найдете код в действии. Ах да, и не забываете что на сайте должен быть подключен Jquery. Можете подключить так:

 

Добавить комментарий

Ваш e-mail не будет опубликован.