JQuery addclass选择div，如果选择了另一个div，则删除class

我正在做一个formbuilder，我想改变例如一个标题div的外观。 单击时，它应该得到一个边框但是当单击另一个动态生成的div时，应该删除该类，并且第二个单击的div必须获取.active类。

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

无论如何，我发现了一些有效的东西，但我仍然需要如果选择另一个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'); }); }); 

Answer 1

你看起来像这样简短有效：

http://jsfiddle.net/XBfMV/

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

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

Answer 2

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

 
 
Heading
 
1
 
2
 
3
 
4
  

然后使用这个javascript：

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

工作jsfiddle中的示例

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

Answer 3

您可以使用单行在div上添加和删除类。 请先删除课程以添加新课程。

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

Answer 4

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

试试这个

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

Answer 5

我不得不将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'); }); }); 

Answer 6

 **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 ie the class is added while loading page gets removed and class which we provide in toggleClss gets added :)