📌  相关文章
📜  当前选项卡在 php 中页面重新加载时处于活动状态(1)

📅  最后修改于: 2023-12-03 14:54:14.209000             🧑  作者: Mango

当前选项卡在 php 中页面重新加载时处于活动状态

在 Web 开发中,有时候需要在 PHP 页面重新加载时保持当前选项卡或窗口处于活动状态,以便用户在不需要手动切换的情况下继续使用。

方案
1. 使用 JavaScript

可以使用 JavaScript 监听 beforeunload 事件,当用户关闭或离开当前页面时,使用 LocalStorage 保存当前选项卡的状态。然后在 PHP 页面加载时,使用 JavaScript 恢复之前的选项卡状态。

// 保存选项卡状态
window.addEventListener('beforeunload', function() {
  localStorage.setItem('activeTab', JSON.stringify(getActiveTab()));
});

// 恢复选项卡状态
window.addEventListener('load', function() {
  var activeTab = JSON.parse(localStorage.getItem('activeTab'));
  if(activeTab) {
    setActiveTab(activeTab);
  }
});

// 获取当前选项卡
function getActiveTab() {
  var tabs = document.querySelectorAll('.tab');
  for(var i=0; i<tabs.length; i++) {
    if(tabs[i].classList.contains('active')) {
      return i;
    }
  }
}

// 设置选中的选项卡
function setActiveTab(index) {
  var tabs = document.querySelectorAll('.tab');
  tabs[index].classList.add('active');
}
2. 传递参数

在 PHP 页面的链接中传递一个参数,用于指定要在哪一个选项卡上显示。

<a href="page.php?activeTab=2">Page with tab 3 active</a>

在 PHP 页面中获取传递的参数,并使用 JavaScript 在指定的选项卡上添加 active 类。

window.addEventListener('load', function() {
  var activeTab = getParameterByName('activeTab');
  if(activeTab) {
    var tabs = document.querySelectorAll('.tab');
    tabs[activeTab - 1].classList.add('active');
  }
});

function getParameterByName(name, url) {
  if(!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if(!results) return null;
  if(!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
总结

以上是两种在 PHP 页面重新加载时保持当前选项卡处于活动状态的方案。根据具体需求选择合适的方案即可。