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
Что-то слишком наворочено
:)

рони 09.03.2015 20:33
Цитата:
Сообщение от Jeick9
В блоке wrap > div у меня содержится label
пример где?

apocalipsis_now 09.03.2015 22:33
Вопрос по схожей теме:
Как быть есть надо, чтобы класс менялся не у дива, по которому нажимают, а по другому?

Нигде не могу найти нормальное решение. (

рони 09.03.2015 22:46
apocalipsis_now,
где код?

laimas 10.03.2015 05:06
рони, на всякий случай

А, ну да, недогляд, или коньяк виноват, был повод :)

apocalipsis_now 10.03.2015 13:14
Есть такой скрипт на jQuery:

.main {
background-image: url(index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}

.div_1 {
background-image: url(bisnes.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}

.div2 {
background-image: url(index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}


<script>
$(document).ready(function(){
$("#div_1").mouseover(function(){
$("#foto").fadeOut(500).addClass("div_1", 500).fadeIn(500);
});
$("#div_2").mouseover(function(){
$("#foto").fadeOut(500).addClass("div_2", 500).fadeIn(500);
});
});
</script>

<div id="div_1" class="pages">БИЗНЕС</div>
<div id="div_2" class="pages">ДЕТИ</div>

При наведении на первый див, фон меняется, а при наведении на второй, остается новая картинка от первого. В чем может быть косяк?

рони 10.03.2015 13:25
apocalipsis_now,
где div foto?

рони 10.03.2015 13:25
apocalipsis_now,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

apocalipsis_now 10.03.2015 13:27
Вот так эта конструкция выглядит:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="main" id="foto">
<tr>
<td>
<div id="div_1" class="pages">БИЗНЕС</div>
<div id="div_2" class="pages">ДЕТИ</div>
</td>
</tr>
</table>

рони 10.03.2015 13:33
Цитата:
Сообщение от apocalipsis_now
addClass("div_2", 500).
Цитата:
Сообщение от apocalipsis_now
.div2 {
background-image: url(index_2.jpg);
может тут ваша проблема?

рони 10.03.2015 14:01
apocalipsis_now,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .main {   height: 200px;
   width: 200px;
 background-image: url(http://www.vseprokosmos.ru/ris/jevodan.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }

 .div_1 {
 background-image: url(http://i78.photobucket.com/albums/j81/MariaContria_2006/floorrtr444kf6.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }

 .div_2 {
 background-image: url(http://club.foto.ru/gallery/images/photo/2004/06/09/218029.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }
 #div_1, #div_2{
    height: 100px;
    border: #CC0000 2px solid
 }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function()
     {
       $("#div_1").click(function()
         {
           $("#foto").fadeOut(500, function()
             {
               $("#foto").addClass("div_1").removeClass("div_2").fadeIn(500)
             }
           );
         }
       );
       $("#div_2").click(function()
         {
           $("#foto").fadeOut(500, function()
             {
               $("#foto").addClass("div_2").removeClass("div_1").fadeIn(500)
             }
           );
         }
       );
     }
   );
  </script>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="main" id="foto">
 <tr>
 <td>
 <div id="div_1" class="pages">БИЗНЕС</div>
 <div id="div_2" class="pages">ДЕТИ</div>
 </td>
 </tr>
 </table>


</body>

</html>

apocalipsis_now 10.03.2015 14:04 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<style>

.pages {
	font-family: "Minion Pro";
	color: #FFF;
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: bold;
	}

.main {
background-image: url(http://slideprojector.ru/index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}

.div_1 {
background-image: url(http://slideprojector.ru/bisnes.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}

.div2 {
background-image: url(http://slideprojector.ru/index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
  
</style>

<script>
$(document).ready(function(){
    $("#div_1").mouseover(function(){
        $("#foto").fadeOut(500).addClass("div_1", 500).fadeIn(500);
    });
    $("#div_2").mouseover(function(){
        $("#foto").fadeOut(500).addClass("div_2", 500).fadeIn(500);
    });
});
</script>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="main" id="foto">
<tr>
<td>
<div id="div_1" class="pages">БИЗНЕС</div>
<div id="div_2" class="pages">ДЕТИ</div>
</td>
</tr>
</table>


Вроде все правильно оформил, чтобы было наглядно видно что происходит. При загрузке страницы фот под дивами правильный. При наведении мыши на надпись "бизнес", фон меняется, а при наведении на надпись "дети" - нет.

рони 10.03.2015 14:21
apocalipsis_now,
смотрите пост 20 -- click замените на mouseover

apocalipsis_now 10.03.2015 15:34
рони,
Ок, спасибо. А есть возможность реализовать это без fade in fade out, чтобы картинки плавно менялись?

рони 10.03.2015 16:05
apocalipsis_now,
добавить пару картинок и изучить css,
на данный момент плавно умеет только Google Chrome с
background-image работать.
Пример: for Chrome
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .main {   height: 200px;
   width: 200px;
 background-image: url(http://www.vseprokosmos.ru/ris/jevodan.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;

 }

 .div_1 {  transition: all 2s ease-in-out;
 background-image: url(http://i78.photobucket.com/albums/j81/MariaContria_2006/floorrtr444kf6.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }

 .div_2 {   transition: all 2s ease-in-out;
 background-image: url(http://club.foto.ru/gallery/images/photo/2004/06/09/218029.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }
 #div_1, #div_2{
    height: 100px;
    border: #CC0000 2px solid
 }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function()
     {
       $("#div_1").mouseover(function()
         {

               $("#foto").addClass("div_1").removeClass("div_2")

         }
       );
       $("#div_2").mouseover(function()
         {

               $("#foto").addClass("div_2").removeClass("div_1")

           }
       );
     }
   );
  </script>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="main" id="foto">
 <tr>
 <td>
 <div id="div_1" class="pages">БИЗНЕС</div>
 <div id="div_2" class="pages">ДЕТИ</div>
 </td>
 </tr>
 </table>


</body>

</html>


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