点击切换Div容器显隐及基于currentTarget的返回功能实现问询

我来帮你完善这段代码，确保操作只作用于当前被点击的容器，实现你要的双向切换效果：

完整代码实现 #

$(document).ready(() => {
  // 点击.shown容器，隐藏自身并显示对应的.tab
  $('.shown').on('click', event => {
    const $currentShown = $(event.currentTarget);
    $currentShown.hide();
    $currentShown.next('.tab').show();
  });

  // 点击.tab里的.button，切换回对应的.shown容器
  $('.button').on('click', event => {
    const $currentButton = $(event.currentTarget);
    // 先找到当前按钮所在的.tab容器，再定位到对应的.shown兄弟元素
    const $relatedTab = $currentButton.closest('.tab');
    const $relatedShown = $relatedTab.prev('.shown');
    
    $relatedTab.hide();
    $relatedShown.show();
  });
});

关键细节说明 #

• 全程使用event.currentTarget确保我们始终操作被点击的元素本身，避免事件冒泡导致误操作其他元素。
• 处理按钮点击时，通过closest('.tab')精准找到按钮所在的父容器，再用prev('.shown')关联到对应的切换前容器，保证只对当前这一组容器生效，不会影响页面上其他同结构的元素。
• 如果你的.tab容器初始需要隐藏，记得在CSS里提前设置：

.tab {
  display: none;
}

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