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

您需要将删除类上下文的选择器设置为包含已单击的ul的{{1}}。试试这个：

li

Updated fiddle

$('.button-switch li a').click(function (e) { e.preventDefault(); $('li a', $(this).closest('ul')).removeClass('active'); $(this).addClass('active'); });也会产生同样的效果。

Answer 2

你的onClick事件删除了课程＆＃34; active＆＃34;来自页面上匹配＆＃34; .button-switch li a＆＃34;的所有元素，因此可以预期当前的行为。

你想要的只是删除＆＃34;活跃＆＃34;来自点击元素的兄弟姐妹：

$('.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/

目标点击元素

2 个答案: