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

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

3 个答案: