如何实现页面刷新时浏览器记住最后激活的Tab标签页？

你之前的尝试存在两处核心问题：一是通过URL hash恢复tab时，触发点击的目标错误（你操作的是内容div而非切换tab的a标签）；二是hash容易被用户手动修改，用localStorage持久化存储更可靠。以下是修正后的完整实现：

1. 更新JavaScript代码 #

function ShowMyDiv(Obj){
  // 隐藏所有tab内容
  var elements = document.getElementsByTagName('div');
  for (var i = 0; i < elements.length; i++) {
    if(elements[i].className=='tabcontent')
      elements[i].style.display= 'none';
  }

  // 显示当前选中的tab内容
  var targetTabId = Obj.rel;
  document.getElementById(targetTabId).style.display= 'block';

  // 更新tab选中状态
  var ul_el = document.getElementById('mytab_ul');
  var li_el = ul_el.getElementsByTagName('li');
  for (var i = 0; i < li_el.length; i++) {
    li_el[i].className="";
  }
  Obj.parentNode.className="selected";

  // 保存当前选中的tab到localStorage
  localStorage.setItem('lastActiveTab', targetTabId);
}

// 页面加载时恢复最后选中的tab
window.onload = function() {
  var lastTab = localStorage.getItem('lastActiveTab');
  // 有保存记录则恢复，否则默认选中第一个tab
  if (lastTab) {
    var tabLink = document.querySelector('a[rel="' + lastTab + '"]');
    tabLink && ShowMyDiv(tabLink);
  } else {
    var defaultTab = document.querySelector('#mytab_ul li.selected a');
    ShowMyDiv(defaultTab);
  }
}

2. 保留原HTML代码（无需修改） #

<ul id="mytab_ul" class="mytabs">
    <li class="selected"><a rel="tab_data" href="#data" onclick="ShowMyDiv(this);">Data</a></li>
    <li><a rel="tab_vtu" href="#vtu" onclick="ShowMyDiv(this);">Vtu</a></li>
    <li><a rel="tab_cabletv" href="#ctv" onclick="ShowMyDiv(this);">CTv</a></li>
    <li><a rel="tab_nepa" href="#npa" onclick="ShowMyDiv(this);">NPA</a></li>
    <li><a rel="tab_exampin" href="#pin" onclick="ShowMyDiv(this);">Pin</a></li>
    <li><a rel="tab_spectranet" href="#spectranet" onclick="ShowMyDiv(this);">Spectranet</a></li>
    <li><a rel="tab_smile" href="#smile" onclick="ShowMyDiv(this);">Smile</a></li>
    <li><a rel="tab_a2cash" href="#cash" onclick="ShowMyDiv(this);">Cash</a></li>
</ul>

关键修正点说明 #

• 原hash方案中，$('#tab_data').trigger("click")无效是因为tab_data是内容div的ID，不是触发切换的a标签，无法执行ShowMyDiv函数；
• 改用localStorage存储最后选中的tab ID，不受URL变化影响，只要用户不清除浏览器缓存，下次打开页面会自动恢复状态；
• 页面加载时通过querySelector找到对应a标签，直接调用ShowMyDiv完成状态恢复，逻辑更直接。

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