26

我正在制作一个表单构建器，我想更改例如标题 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');
    });
});
4

6 回答 6

53

您是否看起来像这样简短而有效：

http://jsfiddle.net/XBfMV/

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

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

于 2013-09-18T16:58:45.080 回答
3

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

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

于 2013-09-18T18:52:03.890 回答
2

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

$('div').on('click',function(){
  $('div').removeClass('active').addClass('active');     
});
于 2016-07-11T08:50:38.070 回答
1

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

尝试这个

$(document).ready(function() {
        $(this.attr('id')).click(function () {
           $(document).find('.active').removeClass('active');
           var DivId = $(this).attr('id');
           alert(DivId);
           $(this).addClass('active');
        });
  });
于 2013-09-18T16:32:19.037 回答
0

我必须将 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');
            });
            });
于 2013-09-19T19:17:41.393 回答
-2 
**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...
于 2016-08-12T08:37:34.110 回答