使用setTimeout刷新页面后，恢复显示原jQuery标签页问题

兄弟，你当前的代码有个致命问题——location.reload()会立即触发页面刷新，刷新后当前页面的所有JS上下文都会被销毁，所以后面那行$("#tabs").tabs({ active: 1})根本没机会执行！这就是为什么你设置了active却没效果的原因。

要实现刷新后保持激活标签页，核心思路是在刷新前把当前激活的标签页状态存起来，页面重新加载后再读取这个状态并设置active。下面给你两种常用的实现方案：

方案一：用localStorage存储状态（推荐，不修改URL） #

这种方法把状态存在浏览器本地，用户刷新页面后依然能读取到，而且不会改变URL。

步骤1：初始化Tabs时监听切换事件，保存状态 #

// 初始化tabs
$("#tabs").tabs({
  // 监听标签页激活事件
  activate: function(event, ui) {
    // 获取当前激活标签页的索引（从0开始）
    var activeTabIndex = $("#tabs").tabs("option", "active");
    // 把索引存到localStorage里
    localStorage.setItem("activeTabIndex", activeTabIndex);
  }
});

步骤2：页面加载时读取状态，设置激活标签页 #

// 页面加载完成后执行
$(document).ready(function() {
  // 从localStorage读取保存的索引，没有的话用默认值0（第一个标签页）
  var savedIndex = localStorage.getItem("activeTabIndex") || 0;
  // 初始化tabs并设置active
  $("#tabs").tabs({
    active: parseInt(savedIndex)
  });
});

方案二：用URL参数/Hash存储状态（适合需要分享链接的场景） #

如果需要让用户分享链接后，打开页面直接显示对应的标签页，可以用URL的hash来存储状态。

步骤1：切换标签页时更新URL Hash #

$("#tabs").tabs({
  activate: function(event, ui) {
    // 获取当前激活标签页的ID（比如#tabs-2）
    var activeTabId = ui.newPanel.attr("id");
    // 更新URL的hash部分
    window.location.hash = activeTabId;
  }
});

步骤2：页面加载时解析Hash，设置激活标签页 #

$(document).ready(function() {
  // 获取当前URL的hash，没有的话用默认的#tabs-1
  var hash = window.location.hash || "#tabs-1";
  // 找到对应标签页的索引
  var activeIndex = $("#tabs ul li a[href='" + hash + "']").parent().index();
  // 初始化tabs并设置active
  $("#tabs").tabs({
    active: activeIndex
  });
});

补充说明 #

如果你是在某个操作后需要刷新页面并跳转到指定标签页（比如提交表单后），可以先把目标索引存在localStorage，再刷新页面：

// 先保存目标索引
localStorage.setItem("activeTabIndex", 1);
// 再刷新页面
location.reload();

这样页面刷新后，步骤2的代码会读取到这个索引并设置激活。

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