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

Обновлено: 23 декабря, 2021

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

<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).
Написано статей
268
7 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 57 оценок, среднее: 5,00 из 5 (7 оценок, среднее: 5,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Понравилась статья? Поделиться с друзьями:
Блог Программиста
Добавить комментарий

четыре × пять =