如何在jQuery Chrome Tabs组件中加载不同PHP页面？

首先，你需要把chrome-tabs的标签UI和内容加载逻辑关联起来，以下是具体实现步骤：

1. 调整页面结构 #

添加一个专门用于显示标签内容的容器，和chrome-tabs的标签容器配合使用：

<div class="chrome-tabs" id="chrome-tabs"></div>
<!-- 标签内容显示区 -->
<div id="tab-content-box" style="margin-top: 10px; border: 1px solid #ddd; padding: 15px; min-height: 450px;"></div>

2. 扩展loadTab函数，关联标签与目标URL #

修改你的loadTab函数，给每个新标签添加自定义属性存储PHP页面地址，同时生成唯一ID用于后续关联：

function loadTab(targetUrl) {
  const tabContainer = document.querySelector('#chrome-tabs');
  const uniqueTabId = 'tab-' + Date.now(); // 生成唯一标签ID

  // 添加新标签，把URL设为标题，同时存储目标地址
  tabContainer.chromeTabs.addTab({
    id: uniqueTabId,
    title: targetUrl,
    attributes: { 'data-target-url': targetUrl }
  });

  // 自动切换到新标签并加载内容
  tabContainer.chromeTabs.selectTab(uniqueTabId);
  renderTabContent(uniqueTabId, targetUrl);
}

3. 实现内容加载函数 #

写一个专门的函数，用jQuery的load方法加载PHP页面到内容容器：

function renderTabContent(tabId, targetUrl) {
  const contentBox = $('#tab-content-box');
  
  // 显示加载提示
  contentBox.html('<div style="text-align:center; padding: 20px;">加载中...</div>');
  
  // 加载目标PHP页面
  contentBox.load(targetUrl, function(response, status, xhr) {
    if (status === 'error') {
      contentBox.html(`加载失败：${xhr.status} ${xhr.statusText}`);
    }
  });
}

4. 绑定标签切换事件 #

监听chrome-tabs的activeTabChange事件，切换标签时自动加载对应内容：

document.querySelector('#chrome-tabs').addEventListener('activeTabChange', function(e) {
  const activeTab = e.detail.tabEl;
  const targetUrl = activeTab.getAttribute('data-target-url');
  const tabId = activeTab.getAttribute('data-tab-id');
  
  if (targetUrl) {
    renderTabContent(tabId, targetUrl);
  }
});

可选：缓存已加载内容 #

如果不想每次切换标签都重新加载PHP页面，可以添加缓存逻辑：

const tabContentCache = {};

function renderTabContent(tabId, targetUrl) {
  const contentBox = $('#tab-content-box');
  
  // 优先使用缓存内容
  if (tabContentCache[tabId]) {
    contentBox.html(tabContentCache[tabId]);
    return;
  }

  contentBox.html('<div style="text-align:center; padding: 20px;">加载中...</div>');
  
  contentBox.load(targetUrl, function(response, status, xhr) {
    if (status === 'success') {
      tabContentCache[tabId] = response; // 缓存加载成功的内容
    } else {
      contentBox.html(`加载失败：${xhr.status} ${xhr.statusText}`);
    }
  });
}

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