javascript - 切换元素组中活动元素的样式

Question

给定一组没有目标属性的元素（例如以下代码），为选定元素设置突出显示样式同时为先前选定元素取消设置相同样式的最有效方法是什么？

<div id="uno" class="element_parent">
    <a href="#" class="element">ONE</div>
</div>
<div id="dos" class="element_parent">
    <a href="#" class="element">ONE</div>
</div>
<div id="tres" class="element_parent">
    <a href="#" class="element">ONE</div>
</div>

Answer 1

我会在单击锚点时添加和删除一个类，如下所示：

$('.element').on('click', function(e) {
    e.preventDefault();
    $(this).addClass('active')
           .closest('div')
           .siblings('div')
           .find('a')
           .removeClass('active')
});

CSS

.active {color: red;} /* or whatever */

或者：

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

Answer 2

就像是：

$(".element").click(function() {
    $(".element").removeClass("active");
    $(this).addClass("active");
});

Answer 3

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