Laravel 8单页多标签分页问题：点击分页后跳转回首个标签

核心问题是分页跳转时未携带当前标签页的状态，导致页面刷新后回到默认标签页，以下是具体修复步骤：

1. 修改标签页切换函数，同步URL参数 #

更新openTab函数，切换标签时将当前标签ID存入URL查询参数，让分页链接能继承该状态：

function openTab(event, tabName) {
  // 原有标签切换逻辑（显示对应内容、切换按钮样式）
  let tabcontent = document.getElementsByClassName("tabcontent");
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  let tablinks = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";

  // 新增：更新URL参数保存当前标签页
  const urlParams = new URLSearchParams(window.location.search);
  urlParams.set('active_tab', tabName);
  window.history.replaceState({}, '', `${window.location.pathname}?${urlParams}`);
}

2. 让分页链接携带标签页参数 #

修改控制器和视图的分页appends方法，将当前标签页参数追加到分页链接中：

控制器代码修改： #

// 获取当前激活的标签页参数，默认tab1
$activeTab = request()->get('active_tab', 'tab1');

$entries = Entry::paginate(5, ['*'], 'entries')
        ->appends(request()->except('entries') + ['active_tab' => $activeTab]);
$company_responses= CompanyResponse::paginate(5, ['*'], 'company_responses')
        ->appends(request()->except('company_responses') + ['active_tab' => $activeTab]);

视图分页代码（可选，控制器已处理时可保持原代码）： #

{{$entries->appends(request()->except('entries') + ['active_tab' => request('active_tab', 'tab1')])->links()}}

{{$company_responses->appends(request()->except('company_responses') + ['active_tab' => request('active_tab', 'tab1')])->links()}}

3. 页面加载时自动激活对应标签页 #

页面初始化时读取URL中的active_tab参数，自动触发对应标签的切换：

window.onload = function() {
  const urlParams = new URLSearchParams(window.location.search);
  const activeTab = urlParams.get('active_tab') || 'tab1';
  // 模拟点击对应标签按钮
  const tabButton = document.querySelector(`.tablinks[onclick="openTab(event,'${activeTab}')"]`);
  if (tabButton) {
    tabButton.click();
  }
};

补充说明 #

• 若不想修改URL，也可用localStorage存储标签页状态，但这种方式在多标签页打开时状态不共享，URL参数更适配分页刷新场景。
• 确保标签内容区域有tabcontent类，且每个内容块的ID与标签按钮中的tabName一致（如tab1对应ID为tab1的内容块）。

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