JQuery addclass для выбранного div, удалить класс, если выбран другой div

Я делаю formbuilder, я хотел бы изменить внешний вид, например, заголовка div. При щелчке он должен получить границу, но при щелчке другого динамически генерируемого div класс должен быть удален, а второй щелчок div должен получить .активный класс.

Как я могу сделать это с сгенерированными divs?

в любом случае я нашел что-то, что работает, но мне все еще нужно, если выбран другой div, предыдущий div.removeclass и выбрали элемент div.addclass

это работает: 

/* Add Class */
$(document).ready(function() {
    $( document ).on( 'click', '.HeadingDiv', function () { /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $('.HeadingDiv').removeClass('active'); /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $(this).addClass('active');
    });
});
22
addclass css jquery removeclass

6 ответов

вы смотрите что-то вроде этого короткого и эффективного:

http://jsfiddle.net/XBfMV/

$('div').on('click',function(){
  $('div').removeClass('active');
  $(this).addClass('active');
});

вы можете просто добавить общий класс "active" для выбранного div. при нажатии div удалите "активный" класс и добавьте его в нажатый div.

50

все дело в селекторе. Вы можете изменить свой код, чтобы быть чем-то вроде этого:

<div class="formbuilder">
    <div class="active">Heading</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

затем используйте этот javascript:

$(document).ready(function () {
    $('.formbuilder div').on('click', function () {
        $('.formbuilder div').removeClass('active');
        $(this).addClass('active');
    });
});

пример работающего jsfiddle

см. этот api о селекторе, который я использовал:http://api.jquery.com/descendant-selector/

3

вы можете использовать одну строку для добавления и удаления класса в div. Сначала удалите класс, чтобы добавить новый класс.

$('div').on('click',function(){
  $('div').removeClass('active').addClass('active');     
});
2

в этом режиме вы можете найти все элемент, который имеет класс Active и удалить его

попробуй такое

$(document).ready(function() {
        $(this.attr('id')).click(function () {
           $(document).find('.active').removeClass('active');
           var DivId = $(this).attr('id');
           alert(DivId);
           $(this).addClass('active');
        });
  });
1

мне пришлось преобразовать divs в список элементов, иначе все мои divs получат этот класс, и только сгенерированные должны получить его Спасибо всем, мне нравится этот сайт и полезные люди на нем !!!! Вы можете следить за проектом школы новичков вhttp://low-budgetwebservice.be/project/webbuilder.html предложения всегда приветствуются :). Так что это сработало для меня:

            /* Add Class Heading*/
            $(document).ready(function() {
            $( document ).on( 'click', 'ul#items li', function () { 
            $('ul#items li').removeClass('active'); 
            $(this).addClass('active');
            });
            });
0
**This can be achived easily using two different ways:**

1)We can also do this by using addClass and removeClass of Jquery
2)Toggle class of jQuery

**1)First Way**

$(documnet.ready(function(){
$('#dvId').click(function(){
  $('#dvId').removeClass('active class or your class name which you want to    remove').addClass('active class or your class name which you want to add');     
});
});

**2) Second Way**

i) Here we need to add the class which we want to show while page get loads.
ii)after clicking on div we we will toggle class i.e. the class is added while loading page gets removed and class which we provide in toggleClss gets added :)

<div id="dvId" class="ActiveClassname ">
</div

$(documnet.ready(function(){
$('#dvId').click(function(){
  $('#dvId').toggleClass('ActiveClassname InActiveClassName');     
});
});


Enjoy.....:)

If you any doubt free to ask any time...
-2