Здравствуйте уважаемые читатели блога Digrand.
Сегодня хочу вам показать вариант смены изображения, контента по клику на ссылку. Столкнулся я с данным вопросом в верстке одного psd макета. Идея была в том, что на картинке были кнопки, по нажатию на которые нужно было заменять под ними картинку. CSS кода всего блока выставлять не буду, т.к. запутаетесь, много лишнего для вас. Основной функционал в Javascript. Также данная фишка часто используется для смены телефонов, например по клику на город (но в таких случаях надо использовать куки, что бы при обновлении страницы данные оставались).
Сначала покажу вам демо, на примере смены телефонов и изображений. Вместо них можно использовать любой другой контент, вплоть до загрузки в iframe других страниц. Скачать готовый Javascript функционала смены изображений, телефона по клику вы сможете ниже:
Ну а далее покажу вам все более подробно.
Смена изображений по клику
1. Сначала добавляем HTML код
1 2 3 | <a href="javascript:l_image ('https://owl-themes.net/images/digrand.jpg')">Ссылка на изображение №1</a> <a href="javascript:l_image ('https://owl-themes.net/images/food/food.jpg')">Ссылка на изображение №2</a> <img src="https://owl-themes.net/images/digrand.jpg" name="example_img" alt="Картинки для демонстрации работы скрипта смены изображений"> |
2. Добавляем немного JS
1 2 3 | <script type="text/javascript"> function l_image (a) {document.example_img.src=a} </script> |
Смена телефона по клику
1. Добавляем HTML код
1 2 3 | <a href="javascript:l_phone ('+7(123)456789')">Москва</a> <a href="javascript:l_phone ('+8(234)567890')">Киев</a> <div id="example_text">Выберите город</div> |
2. Добавляем немного JS
1 2 3 | <script type="text/javascript"> function l_phone (a) { document.getElementById("example_text").innerHTML=a; } </script> |
На этом все, выше по ссылке найдете код в действии. Ах да, и не забываете что на сайте должен быть подключен Jquery. Можете подключить так:
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Залишити відповідь