使用jQuery实现同级元素class切换

要实现点击元素后切换其同级元素的class，可以使用jQuery的siblings()方法结合toggleClass()方法。以下是几种实现方式：

基本实现

$(document).ready(function() {
  $('.your-element').click(function() {
    $(this).siblings().toggleClass('active');
  });
});

示例1：切换特定class

<div class="container">
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div></div>
  <script>$(document).ready(function() {
  $('.item').click(function() {
    $(this).siblings().toggleClass('active'); // 切换同级元素的active类
    $(this).toggleClass('active'); // 也可以同时切换当前元素的类
  });
});</script>

示例2：只保留一个active元素

$(document).ready(function() {
  $('.item').click(function() {
    $(this).siblings().removeClass('active'); // 移除所有同级元素的active类
    $(this).addClass('active'); // 给当前元素添加active类
  });
});

示例3：使用事件委托（适合动态添加的元素）

$(document).ready(function() {
  $('.container').on('click', '.item', function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
  });
});

注意事项

• siblings()方法获取当前元素的所有同级元素
• 使用toggleClass()会在添加和移除class之间切换
• 如果需要精确控制，可以使用addClass()和removeClass()组合
• 事件委托对于动态添加的元素特别有用

本文属原创，转载请注明原文：https://www.zhimatong.com/jiaocheng/1037.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。