Меняем цвет текста и фона при клике на текст

Для того чтобы поменять цвет и фон при клике на текст, пишем следующий код для тега :

<span class="span-option" style="border: 1px solid black; padding: 8px;">SPAN1</span>
<span class="span-option" style="border: 1px solid black; padding: 8px;">SPAN2</span>
<span class="span-option" style="border: 1px solid black; padding: 8px;">SPAN3</span>

и прописываем js:

<script language=”JavaScript”>
$('.span-option').on('click', function() {
$('.span-option').css('color', 'black');
$('.span-option').css('background-color', 'white');
$(this).css('color', 'white');
$(this).css('background-color', 'black');
})
</script>

Пояснение кода:

  • 2,3 строка – возвращает span-ы в начальные значения (фон – белый, цвет текста – черный)
  • строка 4,5 – меняет цвет span-a, по которому кликнули – фон на черный, и цвет текста – белый.
Рейтинг автора
Автор статьи
Юрий
SEO-аналитик, программист (PHP, Ajax, Delphi, MySQL).
Написано статей
117
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

три × 5 =

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: