JQuery addclass到选定的div，如果选择了另一个div，则删除类

JQuery addclass to selected div, remove class if another div is selected

提问by Auguste

I'm making a formbuilder, I would like to change the appearance of for example a heading div. When clicked it should get a border but when another dynamically generated div is clicked the class should be removed and the second clicked div has to get the .active class.

我正在制作一个表单构建器，我想更改例如标题 div 的外观。当点击它应该得到一个边框，但当另一个动态生成的 div 被点击时，该类应该被删除，第二个点击的 div 必须获得 .active 类。

How can I do this with generated divs?

如何使用生成的 div 执行此操作？

Anyway I found something that works but I still need the If another div is selected, previous div.removeclass and selected div.addclass

无论如何，我找到了一些可行的方法，但我仍然需要如果选择了另一个 div，则先前的 div.removeclass 和选定的 div.addclass

This works:

这有效：

/* 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');
    });
});

回答by Caner Akdeniz

Are you looking something like this short and effective:

您是否正在寻找这样简短而有效的内容：

http://jsfiddle.net/XBfMV/

http://jsfiddle.net/XBfMV/

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

you can simply add a general class 'active' for selected div. when a div is clicked, remove the 'active' class, and add it to the clicked div.

您可以简单地为选定的 div 添加一个通用类“活动”。单击 div 时，删除“活动”类，并将其添加到单击的 div。

回答by guydog28

It's all about the selector. You can change your code to be something like this:

这都是关于选择器的。您可以将代码更改为如下所示：

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

Then use this javascript:

然后使用这个javascript：

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

The example in a working jsfiddle

工作jsfiddle中的例子

See this api about the selector I used: http://api.jquery.com/descendant-selector/

请参阅有关我使用的选择器的 api：http: //api.jquery.com/descendant-selector/

回答by Laxmi Priyam Dubey

You can use a single line to add and remove class on a div. Please remove a class first to add a new class.

您可以使用一行来添加和删除 div 上的类。请先删除类以添加新类。

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

回答by Alessandro Minoccheri

In this mode you can find all element which has class active and remove it

在这种模式下，您可以找到所有具有活动类的元素并将其删除

try this

尝试这个

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

回答by Auguste

I had to transform the divs to list items otherwise all my divs would get that class and only the generated ones should get it Thanks everyone, I love this site and the helpful people on it !!!! You can follow the newbie school project at http://low-budgetwebservice.be/project/webbuilder.htmlsuggestions are always welcome :). So this worked for me:

我必须将 div 转换为列出项目，否则我所有的 div 都会得到那个类，只有生成的 div 才能得到它 谢谢大家，我喜欢这个网站和上面有帮助的人！！！！您可以在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');
            });
            });

回答by Dilip Chavan

**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...