📅  最后修改于: 2023-12-03 14:54:14.209000             🧑  作者: Mango
在 Web 开发中,有时候需要在 PHP 页面重新加载时保持当前选项卡或窗口处于活动状态,以便用户在不需要手动切换的情况下继续使用。
可以使用 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');
}
在 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 页面重新加载时保持当前选项卡处于活动状态的方案。根据具体需求选择合适的方案即可。