仅针对已点击元素

Question

我制作了一个简单的开关按钮。 类正在改变，但是当我有这个按钮的多个实例时，它不保留原始选择。

在此先感谢

HTML

<ul class="button-switch"> 
    <li><a href="#" class='active'>Spider-Man</a></li> 
    <li><a href="#">Iron Man</a></li> 
    <li><a href="#">Thor</a></li> 
    <li><a href="#">Hulk</a></li> 
</ul> 

JQUERY

$('.button-switch li a').click(function(e) { 
    e.preventDefault(); 
    $('.button-switch li a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

JS提琴例如 https://jsfiddle.net/t1gsp90j/1/

Answer 1

你需要让这消除了阶级背景的选择其中包含被点击的li。试试这个：

$('.button-switch li a').click(function (e) { 
    e.preventDefault(); 
    $('li a', $(this).closest('ul')).removeClass('active'); 
    $(this).addClass('active'); 
}); 

Updated fiddle

$(this).closest('ul').find('li a').removeClass('active');也有同样的效果。

Answer 2

您的onClick事件从页面上与“.button-switch li a”匹配的所有元素中删除“active”类，因此当前行为是预期的。

你要的是只从点击的元素的兄弟姐妹中删除“活动”：

$('.button-switch li a').click(function(e) { 
    e.preventDefault(); 
    var target = $(e.target); 
    var parentUl = target.closest('.button-switch'); 
    // Find all links inside the current parent ul element. 
    parentUl.find('li a').removeClass('active'); 
    target.addClass('active'); 
}); 

而且对我建议重写这样的单击事件，以提高性能

$('.button-switch').on('click', 'li a', function(e) { 
    e.preventDefault(); 
    var target = $(e.target); 
    var parentUl = target.closest('.button-switch'); 
    // Find all links inside the current parent ul element. 
    parentUl.find('li a').removeClass('active'); 
    target.addClass('active'); 
}); 

https://jsfiddle.net/Macavity/t1gsp90j/5/