如何实现垂直标签菜单选中时刷新对应PHP内容，无需重载整个页面

解决方案 #

核心逻辑 #

你当前的问题根源是页面初始化时PHP已经把三个功能文件的内容全部渲染到页面中，标签切换仅做显示/隐藏控制，不会拉取最新数据。改造的核心是：切换标签时动态发起请求拉取对应PHP文件的最新内容，替换到当前激活的标签容器内，不需要刷新整个页面。

第一步：调整HTML结构 #

先删除原有.tabcontent容器内的PHP引入代码，不需要页面加载时提前渲染所有内容，修改后结构如下：

<div id="London" class="tabcontent">
  <h3>insert</h3>
  <p>here will be my first php includes</p>
  <!-- 删掉原来的<?php include "insert.php"; ?> 动态加载时填充内容 -->
</div>

<div id="Paris" class="tabcontent">
  <h3>update</h3>
  <p>here will be my second php includes</p>
  <!-- 删掉原来的<?php include "update.php"; ?> -->
</div>

<div id="Tokyo" class="tabcontent">
  <h3>delete</h3>
  <p>here will be my third php includes</p>
  <!-- 删掉原来的<?php include "delete.php"; ?> -->
</div>

方案1：原生JavaScript实现（兼容原有技术栈） #

直接修改原有openCity函数，增加动态请求逻辑即可：

// 建立标签ID和对应PHP文件的映射关系
const tabPageMap = {
  London: 'insert.php',
  Paris: 'update.php',
  Tokyo: 'delete.php'
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  // 新增：动态拉取对应PHP文件的最新内容
  const activeTab = document.getElementById(cityName);
  const fixedContent = activeTab.querySelector('h3').outerHTML + activeTab.querySelector('p').outerHTML;
  activeTab.innerHTML = fixedContent + '<p class="loading">加载中...</p>'; // 可选加载提示
  fetch(tabPageMap[cityName])
    .then(res => res.text())
    .then(html => {
      // 保留原有标题和提示文本，替换PHP返回的功能内容
      activeTab.innerHTML = fixedContent + html;
      activeTab.style.display = "block";
    })
    .catch(err => {
      activeTab.innerHTML += '<p class="error">内容加载失败，请重试</p>';
      activeTab.style.display = "block";
    });

  evt.currentTarget.className += " active";
}

// 默认打开第一个标签逻辑不变
document.getElementById("defaultOpen").click();

方案2：jQuery实现（代码更简洁，兼容性更好） #

如果项目允许引入jQuery，改造代码更短：
首先在head内引入jQuery（如果还没引入的话）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后修改标签切换逻辑：

const tabPageMap = {
  London: 'insert.php',
  Paris: 'update.php',
  Tokyo: 'delete.php'
}

function openCity(evt, cityName) {
  $(".tabcontent").hide();
  $(".tablinks").removeClass("active");
  // 保留原有固定内容，动态加载PHP功能部分
  const fixedContent = $(`#${cityName}`).find('h3, p:first').prop('outerHTML');
  // 动态加载内容
  $(`#${cityName}`).html(fixedContent + '<p class="loading">加载中...</p>').load(tabPageMap[cityName], function(response, status) {
    if(status === "error") {
      $(this).append('<p class="error">内容加载失败，请重试</p>');
    }
    $(this).show();
  });
  $(evt.currentTarget).addClass("active");
}

$("#defaultOpen").click();

额外优化：表单提交也无需刷新整页 #

如果要实现增删改操作时也不刷新整页，可以给insert/update/delete.php内的表单绑定异步提交事件，示例逻辑如下（以insert.php的表单为例）：

// 插入表单异步提交逻辑
$('#insertForm').submit(function(e) {
  e.preventDefault(); // 阻止默认表单跳转刷新
  $.post($(this).attr('action'), $(this).serialize(), function(res) {
    alert('插入成功');
    // 提交成功后可以重置表单
    $('#insertForm')[0].reset();
  })
})

提交完成后切换标签，就会自动拉取最新的更新/删除页面数据，不需要手动刷新。

内容的提问来源于stack exchange，提问作者A. Chithrai