ProfiPHPProfiPHP
  1. Главная
  2. jQuery
  3. Изменение цвета блока при нажатии на него

Изменение цвета блока при нажатии на него

Если вам необходимо изменить цвет блока на нажатии на него, реализовать это можно очень просто с помощью библиотеки jQuery.

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Добавляем следующий JS код:
<script type="text/javascript">
jQuery(function( $ ) {
$('.answers li.wrong').click(function(){
$(this).addClass('wrong_answer');
});
$('.answers li.right').click(function(){
$(this).addClass('right_answer');
});
});
</script>
Код CSS:
<style type="text/css">
.answers li.right_answer{ border: 1px solid #6cdb9b; background: #6cdb9b; color: #fff }
.answers li.wrong_answer{ border: 1px solid #e4615d; background: #e4615d; color: #fff }
</style>
Код HTML:
<ul class="answers">
<li class="wrong">Не правильно</li>
<li class="right">Правильно</li>
</ul>
С помощью данного кода можно реализовать на сайте систему тестов.

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

Имя:
Текст комментария: