Как добавить и удалить класс при нажатии на div?
Здравствуйте.
У меня вопрос по поводу добавления и удаления классов. Мне собственно нужно при нажатии на div добавить ему стиль, то есть класс. И соответственно при втором нажатии его удалить. Смотрел похожие темы на форуме но так толком ничего подходящего и простого не нашел. Подскажите пожалуйста как это реализовать. |
jQuery используется и о поведении одного DIV идет речь или может быть произвольное число их?
|
Их несколько. То есть, при нажатии на один div-блок эму нужно добавить класс, а у других его убрать.
|
jQuery используется на сайте?
|
да
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.wrap > div {
width: 50px;
height: 50px;
line-height: 50px;
cursor: pointer;
border: 1px dashed #ccc;
text-align: center;
}
.active {
background: #f00;
}
</style>
<div class="wrap">
<div>1</div>
<div>3</div>
<div>2</div>
<div>4</div>
</div>
<script>
var wrap = $('.wrap > div');
wrap.click(function (){
$(this).toggleClass('active');
$('.wrap > div').not($(this)).removeClass('active');
});
</script>
|
Что-то слишком наворочено:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.as1 {
color: #f00;
}
.as2 {
color: #0f0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('div.as1, div.as2').click(function() {
$(this).toggleClass('as1 as2')
})
});
</script>
</head>
<body>
<div class="as1">TTTT</div>
<div class="as1">TTTT</div>
<div class="as1">TTTT</div>
<div class="as1">TTTT</div>
<div class="as1">TTTT</div>
</body>
</html>
|
hhh, спасибо. То что надо!
|
У меня ещё один вопрос. В блоке wrap > div у меня содержится label и при нажатии на него переключатель не срабатывает. Как это исправить?
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 15:20. |