jquery 上下翻页效果

jQuery 是一种广泛使用的 JavaScript 库，可以大大简化一些常见的任务，例如 DOM 操作、事件处理、动画效果等。其中之一的上下翻页效果，为我们的网站提供了更多样化、更优雅的展示方式。

$(document).ready(function() {
  $("#next-page").click(function() {  // 当点击“下一页”按钮时
    var current = $(".active-page"); // 获取当前页的页码
    var next = current.next(); // 获取下一页的页码
    if(next.length > 0) {   // 如果有下一页
      current.removeClass("active-page"); // 移除当前页的激活状态
      next.addClass("active-page"); // 为下一页加上激活状态
    }
  });
  
  $("#prev-page").click(function() {  // 当点击“上一页”按钮时
    var current = $(".active-page"); // 获取当前页的页码
    var prev = current.prev(); // 获取上一页的页码
    if(prev.length > 0) {   // 如果有上一页
      current.removeClass("active-page"); // 移除当前页的激活状态
      prev.addClass("active-page"); // 为上一页加上激活状态
    }
  });
})

以上代码实现了一种简单的上下翻页效果，可以通过点击“上一页”或“下一页”按钮，实现页面的切换。其中通过添加或移除“active-page”类名，来控制每一页的激活状态。当然，我们也可以将其中的样式和效果进行更改，以满足不同网站的设计要求。