Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как добавить и удалить класс при нажатии на div? (https://javascript.ru/forum/events/54186-kak-dobavit-i-udalit-klass-pri-nazhatii-na-div.html)

Jeick9 07.03.2015 15:47

Как добавить и удалить класс при нажатии на div?
 
Здравствуйте.
У меня вопрос по поводу добавления и удаления классов. Мне собственно нужно при нажатии на div добавить ему стиль, то есть класс. И соответственно при втором нажатии его удалить. Смотрел похожие темы на форуме но так толком ничего подходящего и простого не нашел. Подскажите пожалуйста как это реализовать.

laimas 07.03.2015 16:11

jQuery используется и о поведении одного DIV идет речь или может быть произвольное число их?

Jeick9 07.03.2015 16:18

Их несколько. То есть, при нажатии на один div-блок эму нужно добавить класс, а у других его убрать.

laimas 07.03.2015 16:19

jQuery используется на сайте?

Jeick9 07.03.2015 16:23

да

hhh 07.03.2015 16:34

<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>

laimas 07.03.2015 16:54

Что-то слишком наворочено:

<!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>

Jeick9 09.03.2015 17:18

hhh, спасибо. То что надо!

Jeick9 09.03.2015 20:12

У меня ещё один вопрос. В блоке wrap > div у меня содержится label и при нажатии на него переключатель не срабатывает. Как это исправить?

рони 09.03.2015 20:30

Цитата:

Сообщение от laimas
$('div.as1, div.as2').

на всякий случай
Цитата:

Сообщение от laimas
Что-то слишком наворочено

:)


Часовой пояс GMT +3, время: 09:35.