Изменение стилей объекта после клика мышкой

Заказчики часто просят сделать изменение стиля объекта после клика мышки. Это может быть изменение цвета или фона, а может и что-то более серьезное.

Для решения задачи нам понадобится создать простой js скрипт и разметку к нему. В примере мы будем менять задний фон сайта после клика по определенному блоку.

demo

Подготовим разметку.

надежный хостинг

<body id="2" >
<div id="1"></div>
<span >Изменение стилей объекта после клика мышкой</span>
</body>

Так как мы меняем задний фон после клика, нам нужно как-то обозначить блоки, которые будут участвовать в этом процессе. Для простоты примера воспользуемся цифирными id.

Блок на, который мы будем кликать будет первым, а блок, который будет меняться — вторым.
Теперь нужно подготовить стили. Для этого нам нужно придумать название класса и написать как должен выглядеть блок после клика.

В нашем примере цвет фона будет меняться с белого на серый.

.div {
background-color:#ccc;
}

Скрипт изменения стилей

<script>
$(document).ready(function(){
$(function(){
$('#1').click(function(){
$('#2').toggleClass('div');
});
});
});
</script>

Что происходит при выполнении скрипта?

Если мы кликаем по блоку с id="1", то блоку с id="2", присваивается новый стиль. Пример очень простой, но он показывает как легко изменить стили объекта по щелчку мышки. При этом если пользователь будет кликать мышкой вне указанного блока, стили меняться не будут.

Результат работы скрипта можно посмотреть на demo странице и не смущайтесь простоты примера, визуальный результат зависит от вашей фантазии и владения css.

И не забудьте подключить jquery библиотеку к своему сайту, в противном случае скрипт не будет работать.

надежный хостинг
Поделиться в социальных сетях: