Question

我正在做一个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

关于选择器的全部内容。您可以将代码更改为：

<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/

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都会获得该类，只有生成的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 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...

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

6 个答案: