Форум

Jeick9 · #1 (**permalink**) 07.03.2015, 15:47

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

laimas · #2 (**permalink**) 07.03.2015, 16:11

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

Jeick9 · #3 (**permalink**) 07.03.2015, 16:18

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

laimas · #4 (**permalink**) 07.03.2015, 16:19

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

Jeick9 · #5 (**permalink**) 07.03.2015, 16:23

hhh · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 09.03.2015, 17:18

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

Jeick9 · #9 (**permalink**) 09.03.2015, 20:12

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

рони · #10 (**permalink**) 09.03.2015, 20:30

Сообщение от laimas

$('div.as1~~, div.as2~~').

на всякий случай

Сообщение от laimas

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

Форум

Справочник

Discord чат

Курсы javascript