Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.03.2015, 15:47
Интересующийся
Отправить личное сообщение для Jeick9 Посмотреть профиль Найти все сообщения от Jeick9
 
Регистрация: 08.10.2014
Сообщений: 23

Как добавить и удалить класс при нажатии на div?
Здравствуйте.
У меня вопрос по поводу добавления и удаления классов. Мне собственно нужно при нажатии на div добавить ему стиль, то есть класс. И соответственно при втором нажатии его удалить. Смотрел похожие темы на форуме но так толком ничего подходящего и простого не нашел. Подскажите пожалуйста как это реализовать.
Ответить с цитированием
  #2 (permalink)  
Старый 07.03.2015, 16:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

jQuery используется и о поведении одного DIV идет речь или может быть произвольное число их?
Ответить с цитированием
  #3 (permalink)  
Старый 07.03.2015, 16:18
Интересующийся
Отправить личное сообщение для Jeick9 Посмотреть профиль Найти все сообщения от Jeick9
 
Регистрация: 08.10.2014
Сообщений: 23

Их несколько. То есть, при нажатии на один div-блок эму нужно добавить класс, а у других его убрать.
Ответить с цитированием
  #4 (permalink)  
Старый 07.03.2015, 16:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

jQuery используется на сайте?
Ответить с цитированием
  #5 (permalink)  
Старый 07.03.2015, 16:23
Интересующийся
Отправить личное сообщение для Jeick9 Посмотреть профиль Найти все сообщения от Jeick9
 
Регистрация: 08.10.2014
Сообщений: 23

да
Ответить с цитированием
  #6 (permalink)  
Старый 07.03.2015, 16:34
hhh hhh вне форума
Профессор
Отправить личное сообщение для hhh Посмотреть профиль Найти все сообщения от hhh
 
Регистрация: 19.11.2013
Сообщений: 150

<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>
Ответить с цитированием
  #7 (permalink)  
Старый 07.03.2015, 16:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2015, 17:18
Интересующийся
Отправить личное сообщение для Jeick9 Посмотреть профиль Найти все сообщения от Jeick9
 
Регистрация: 08.10.2014
Сообщений: 23

hhh, спасибо. То что надо!
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2015, 20:12
Интересующийся
Отправить личное сообщение для Jeick9 Посмотреть профиль Найти все сообщения от Jeick9
 
Регистрация: 08.10.2014
Сообщений: 23

У меня ещё один вопрос. В блоке wrap > div у меня содержится label и при нажатии на него переключатель не срабатывает. Как это исправить?
Ответить с цитированием
  #10 (permalink)  
Старый 09.03.2015, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

Сообщение от laimas
$('div.as1, div.as2').
на всякий случай
Сообщение от laimas
Что-то слишком наворочено
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинок. Как зациклить при нажатии? Aggao Общие вопросы Javascript 6 02.12.2014 16:38
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
Как добавить класс к нужному элементу при наведении на определеные ссылки? crazygangster77 Events/DOM/Window 3 05.06.2013 02:19
при нажатии на картинку(типа кнопки) скрывать и показывать DIV Russianmaniac Элементы интерфейса 4 28.11.2010 00:47
Подгрузка контента в определённый DIV при нажатии на ссылку, без перезагрузки страниц Flashton Events/DOM/Window 0 10.03.2010 19:53