点击分页元素设对应case-study为relative，其余重置为absolute的实现问题

我来帮你搞定这个问题！你的核心需求是点击分页项时，让对应的.case-study元素设为relative，同时把其他同类型元素重置为absolute。当前代码只给目标元素设置了relative，但没有处理其他元素的重置，所以才会出现问题。下面给你两种解决方案：

方案1：直接操作CSS属性（快速修改） #

我们可以先统一把所有.case-study的position重置为absolute，再给当前点击对应的元素设置relative，同时还能简化重复的点击事件绑定：

<div class="case-studies">
  <section class="pagination">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </section>
  <div class="case-study" style="background:blue;"></div>
  <div class="case-study" style="background:green;"></div>
  <div class="case-study" style="background:orange;"></div>
  <div class="case-study" style="background:pink;"></div>
</div>

// 给所有分页div绑定统一的点击事件
$('.pagination div').on('click', function() {
  // 获取当前点击项的索引（从0开始计数）
  const targetIndex = $(this).index();
  
  // 第一步：把所有case-study的position重置为absolute
  $('.case-study').css('position', 'absolute');
  
  // 第二步：给对应索引的case-study设置为relative
  $('.case-study').eq(targetIndex).css('position', 'relative');
});

方案2：使用CSS类（推荐，样式与行为分离） #

这种方式更符合前端最佳实践，把样式定义在CSS里，JS只负责切换类，便于后续维护：

首先添加CSS样式：

/* 默认所有case-study都是absolute */
.case-study {
  position: absolute;
  /* 可以在这里添加其他默认样式，比如宽度、高度等 */
}

/* 激活状态设为relative */
.case-study.active {
  position: relative;
}

然后修改JS代码：

$('.pagination div').on('click', function() {
  const targetIndex = $(this).index();
  
  // 先移除所有case-study的active类
  $('.case-study').removeClass('active');
  
  // 给对应索引的case-study添加active类
  $('.case-study').eq(targetIndex).addClass('active');
});

这样每次点击分页项时，都会先重置所有元素的状态，再激活目标元素，完美实现你的需求！

内容的提问来源于stack exchange，提问作者Al-76