jQuery多元素切换：二次点击移除类名功能实现求助

你的问题核心是缺少对「是否重复点击当前激活链接」的判断逻辑，现有代码每次点击都会强制给其他链接添加半透明类，无法回到初始状态。下面是修改后的完整实现：

修改后的JavaScript代码 #

$(function() {
  $('.showSingle a').click(function() {
    const $currentLink = $(this);
    const targetNum = $currentLink.attr('data-target');
    const isAlreadyActive = $currentLink.hasClass('active');

    // 先统一重置所有元素状态
    $('.showSingle a').removeClass('active filteropacity');
    $('.targetDiv').hide();

    if (!isAlreadyActive) {
      // 首次点击该链接：激活当前链接，弱化其他链接，显示对应内容
      $currentLink.addClass('active');
      $('.showSingle a').not($currentLink).addClass('filteropacity');
      $('#div' + targetNum).show();
    }
    // 重复点击时，上面的重置逻辑已经让页面回到初始状态
  });
});

保留原CSS和HTML代码 #

CSS无需修改：

.filteropacity {
    opacity: .5;
}

HTML结构保持不变：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showSingle">
  <a class="link1" id="color1" data-target="1">Div 1</a>
  <a class="link2" id="color2" data-target="2">Div 2</a>
  <a class="link3" id="color3" data-target="3">Div 3</a>
  <a class="link4" id="color4" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

核心逻辑说明 #

1. 状态标记：新增active类标记当前被点击激活的链接，用来判断是否是重复点击同一链接
2. 统一重置：每次点击先清空所有链接的样式类、隐藏所有内容div，避免状态残留导致的逻辑混乱
3. 分支处理：
   • 首次点击：激活当前链接、给其他链接添加半透明类、显示对应内容div
   • 重复点击：依赖重置逻辑直接回到初始状态

内容的提问来源于stack exchange，提问作者bastiag5