如何修复jQuery实现的内容切换代码，实现数字按钮与翻页按钮无需刷新即可联动？

原代码存在三处逻辑断层，直接导致需要刷新页面才能正常操作、两类按钮状态不同步：

• 初始化隐藏逻辑选择器错配：原代码中$(".btn-hover div")用于查找.btn-hover元素下的子节点，但实际DOM结构中.btn-hover是纯文本锚点标签，没有任何子div，这行代码完全空跑，没有实际隐藏非首屏内容块
• 数字按钮逻辑缺失显示控制：点击数字按钮时仅切换了内容块的btn-active类名，没有和Next/Prev按钮一样执行内容块的show/hide操作，两类按钮的内容切换逻辑完全割裂
• 翻页操作无状态同步：点击Next/Prev按钮切换内容后，没有同步更新顶部数字按钮的高亮状态，两边状态互不感知

将分散的切换逻辑抽成公共函数，不管是数字按钮触发、还是上下翻页按钮触发，都调用统一的切换方法，从根源上保证状态一致。原有HTML结构无需修改，直接替换原有JS逻辑即可生效：

$(document).ready(function() {
  // 统一页面切换逻辑：输入目标页码索引，同步更新内容和按钮状态
  function switchToPage(targetIndex) {
    // 隐藏所有内容块，移除激活状态类
    $(".content5 div, .content6 div").hide().removeClass("btn-active");
    // 显示对应索引的内容块，加上激活状态类
    $(".content5 div, .content6 div").eq(targetIndex).show().addClass("btn-active");
    // 同步顶部数字按钮的高亮激活状态
    $(".btn-hover").removeClass("btn-active").eq(targetIndex).addClass("btn-active");
  }

  // 页面初始化直接执行第一页的切换逻辑，无需额外刷新
  switchToPage(0);

  // 下一页按钮逻辑
  $("#next").click(function(e) {
    e.preventDefault();
    const currentIndex = $(".btn-hover").index($(".btn-hover.btn-active"));
    const totalPage = $(".btn-hover").length;
    // 循环翻页逻辑：最后一页点下一页回到第一页
    const nextIndex = (currentIndex + 1) % totalPage;
    switchToPage(nextIndex);
    return false;
  });

  // 上一页按钮逻辑
  $("#previous").click(function(e) {
    e.preventDefault();
    const currentIndex = $(".btn-hover").index($(".btn-hover.btn-active"));
    const totalPage = $(".btn-hover").length;
    // 循环翻页逻辑：第一页点上一页回到最后一页
    const prevIndex = (currentIndex - 1 + totalPage) % totalPage;
    switchToPage(prevIndex);
    return false;
  });

  // 数字按钮点击逻辑
  $(".btn-hover").click(function(e) {
    e.preventDefault();
    const targetIndex = $(".btn-hover").index($(this));
    switchToPage(targetIndex);
    return false;
  });
});

• 页面加载完成后立刻进入可用状态，不需要手动刷新就能点击两类按钮
• 任意一类按钮操作后，另一类按钮的高亮状态、对应的展示内容会完全同步
• 翻页到内容首尾时自动循环，不会出现内容空白的情况
• 所有原有样式逻辑（包括btn-active类的样式效果）完全保留，不会出现样式错乱

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