Форум

Peter007 · #1 (**permalink**) 18.01.2014, 18:32

Доброго времени суток.
Проблема заключается в следующем. У нас есть вот такая страница с элементами:

По клику на один из этих элементов ему присваивается класс, но при клике на другой у первого этот класс удаляется и присваивается тому на который кликнули, и т.д.
Т.е. класс должен по клику на какой либо элемент удаляться у того элемента которому присвоен, и добавляться элементу на который кликнули. Заранее спасибо!

Vlasenko Fedor · #2 (**permalink**) 18.01.2014, 18:58

<style>
      #myblock>div {
        width:30%;
        height: 50px;
        border: 2px solid #000;
        margin: 5px;
        display: inline-block;
      }
      .active {
        background-color: red;
      }
    </style>
  </head>
  
  <body>
    <div id="myblock">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <script>
      var el, target;
      myblock.onclick = function (e) {
        e = e || window.event;
        target = e.target || e.srcElement;
        if (target.id =="myblock") return;
        el && (el.className = '');
        target.className = 'active';
        el = target;
      }
    </script>
  </body>

Peter007 · #3 (**permalink**) 18.01.2014, 19:00

Poznakomlus,
спасибо большое, а нет решения на JQuery?

Vlasenko Fedor · #4 (**permalink**) 18.01.2014, 19:06

<head>
<style>
      #myblock>div {
        width:30%;
        height: 50px;
        border: 2px solid #000;
        margin: 5px;
        display: inline-block;
      }
      .active {
        background-color: red;
      }
    </style>
    
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  </head>
  
  <body>
    <div id="myblock">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <script>
jQuery(function($){    
    $('#myblock').on('click', 'div', function () {
        $(this).addClass('active').siblings().removeClass('active'); 
    });
});
    </script>
  </body>

Peter007 · #5 (**permalink**) 18.01.2014, 22:43

Poznakomlus, еще раз огромное спасибо. А можно ли как нибудь сделать что бы класс еще удалялся по клику на сторонний элемент, а к примеру на ссылку с классом .close

Vlasenko Fedor · #6 (**permalink**) 18.01.2014, 23:08

не совсем понятно, что вы имеете ввиду
так
http://learn.javascript.ru/play/cghyBb

Peter007 · #7 (**permalink**) 18.01.2014, 23:10

Poznakomlus, оно самое! Огромное спасибо!
Только кнопка находится в каждом из этих дивов, при нажатии на неё у дива удаляется класс
вот так http://learn.javascript.ru/play/sQQnxb

Peter007 · #8 (**permalink**) 19.01.2014, 23:44

рони · #9 (**permalink**) 19.01.2014, 23:58

Peter007, отмените всплытие из $('div .close')
event.stopPropagation()

Vlasenko Fedor · #10 (**permalink**) 20.01.2014, 00:30

в некоторых случаях достаточно
return false;
http://learn.javascript.ru/play/y2ixD

Форум

Справочник

Discord чат

Курсы javascript