Смена цвета при нажатии

277

10 декабря 2016, 10:34

.test { 
  height:50px; 
  width:50px; 
  background:#000; 
}

<div class="test"></div>

Как сделать так, чтобы при клике на блок "test", он становился красным, при еще одном клике - обратно на черный.

Answer 1

Можно сделать на html+css

.test { 
  height: 50px; 
  width: 50px; 
  background-color: black; 
} 
input { 
  display: none; 
} 
input:checked + label > div { 
  background-color: red; 
}

<input type="checkbox" id="colorbox"> 
<label for="colorbox"> 
  <div class="test"></div> 
</label>

Answer 2

Можно воспользоваться родственным селектором ~ и связью <label> с <input>.

Плюсы: javascript не нужен.
Минусы: нужна дополнительная разметка.

.hidden { 
  display: none; 
} 
.test { 
  display: block; 
  height: 50px; 
  width: 50px; 
  background: #000; 
} 
#switcher:checked ~ .test { 
  background: #f00; 
}

<input type="checkbox" class="hidden" id="switcher"> 
<label class="test" for="switcher"></label>

Answer 3

Используя javascript и jQuery:

$('.test').on('click', function(){
    $(this).toggleClass('red');
});

и в css добавить

.test.red{
    color: red;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблема с отступами html в Sublime Text 3

Редактируется html файлик

358

HTML

проблема с margin

Верстаю макет, использую bootstrapСтолкнулся с такой проблемой: margin по факту есть и влияет на расположение элементов, но во вкладке computed он не отображается,...

206

HTML

Из трех колонок в две в Bootstrap при media screen

Привет! Кто-нибудь подскажет как мне три столбика преобразовать в два при изменении разрешения экранаИспользуется Bootstrap

230

HTML

Сглаживание радиальных элементов

286