Fetch删除请求后刷新页面，无法设置元素display属性的解决方案

问题根源 #

你当前的代码里，window.location.href = window.location.href会立刻触发页面刷新，后面的样式修改代码根本没机会执行——就算执行了，页面刷新后所有DOM元素都会重新加载，回到初始状态，所以样式设置完全无效。

三种可行解决方案 #

方案1：通过URL参数传递状态（最稳妥，无存储残留）

刷新页面时在URL里加个参数，页面重新加载后读取这个参数来设置样式：

1. 修改fetch成功后的跳转逻辑：

.then(() => {
  // 给当前URL添加activeTab参数，标记要显示的标签页
  const currentUrl = new URL(window.location.href);
  currentUrl.searchParams.set('activeTab', 'projects');
  window.location.href = currentUrl.toString();
})

2. 在页面初始化时添加读取参数的代码：

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const activeTab = urlParams.get('activeTab');
  
  // 先统一隐藏所有盒子
  contactBox.style.display = 'none';
  projectBox.style.display = 'none';
  opportunitiesBox.style.display = 'none';
  
  // 根据URL参数设置要显示的盒子
  if (activeTab === 'projects') {
    projectBox.style.display = 'block';
  } else {
    // 默认回到contactBox的显示状态
    contactBox.style.display = 'block';
  }
});

方案2：用localStorage临时存储状态

把要激活的标签状态存在本地存储，页面加载后读取并清除：

1. 修改fetch的then回调：

.then(() => {
  // 临时存储要显示的标签
  localStorage.setItem('activeTab', 'projects');
  window.location.href = window.location.href;
})

2. 页面初始化时读取存储：

document.addEventListener('DOMContentLoaded', function() {
  const activeTab = localStorage.getItem('activeTab');
  
  // 先隐藏所有盒子
  contactBox.style.display = 'none';
  projectBox.style.display = 'none';
  opportunitiesBox.style.display = 'none';
  
  if (activeTab === 'projects') {
    projectBox.style.display = 'block';
    // 用完立刻删除，避免下次打开页面还保留这个状态
    localStorage.removeItem('activeTab');
  } else {
    contactBox.style.display = 'block';
  }
});

方案3：不刷新页面，直接更新DOM（最优体验）

既然用了异步fetch，完全没必要刷新页面——请求成功后直接删除页面上的项目元素，再设置样式即可，用户体验更流畅：

.then(() => {
  // 假设你的表单里有projectId字段，用来定位要删除的项目元素
  const projectId = formData.get('projectId');
  const targetProject = document.getElementById(`project-${projectId}`);
  if (targetProject) {
    targetProject.remove(); // 移除页面上的项目节点
  }
  
  // 直接设置样式，无需刷新
  contactBox.style.display = "none";
  projectBox.style.display = "block";
  opportunitiesBox.style.display = "none";
})

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