优化多标签页内容加载：实现按需动态加载以提升页面性能

<div class="col-md-6">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">动态加载标签页示例</h4>
            <!-- 导航标签 -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false">TAB2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false">TAB3</a>
                </li>
            </ul>

            <!-- 标签页内容区域 -->
            <div class="tab-content tabcontent-border">
                <div class="tab-pane active show" id="tab1" role="tabpanel">
                    <!-- TAB1内容将在此处加载 -->
                </div>
                <div class="tab-pane" id="tab2" role="tabpanel">
                    <!-- TAB2内容将在此处加载 -->
                </div>
                <div class="tab-pane" id="tab3" role="tabpanel">
                    <!-- TAB3内容将在此处加载 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入必要的库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<?php
// 这里可以连接数据库、调用API等，获取TAB1所需的数据
// 例如：
// $data = fetchDataForTab1();
echo '<div class="p-20">这是TAB1的内容，加载于 ' . date('Y-m-d H:i:s') . '</div>';
?>

<?php
// 获取TAB2数据
echo '<div class="p-20">这是TAB2的内容，加载于 ' . date('Y-m-d H:i:s') . '</div>';
?>

$(document).ready(function() {
    /**
     * 加载指定标签页内容的函数
     * @param {string} tabId - 目标标签页的ID选择器，例如 '#tab1'
     * @param {string} contentUrl - 获取标签页内容的URL，例如 'tab1.php'
     */
    function loadTabContent(tabId, contentUrl) {
        const $tabPane = $(tabId);

        // 检查标签页是否已经加载过内容
        if ($tabPane.data('loaded') !== true) {
            // 显示加载指示器
            $tabPane.html('<div class="p-20 text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">加载中...</span></div> 加载中...</div>');

            // 使用jQuery.load()加载内容
            $tabPane.load(contentUrl, function(response, status, xhr) {
                if (status === "error") {
                    // 加载失败处理
                    $tabPane.html('<div class="p-20 text-danger">内容加载失败，请重试。错误: ' + xhr.status + ' ' + xhr.statusText + '</div>');
                    console.error("加载标签页内容失败:", xhr.status, xhr.statusText);
                } else {
                    // 标记为已加载
                    $tabPane.data('loaded', true);
                    console.log(`Tab ${tabId} content loaded successfully from ${contentUrl}`);
                }
            });
        } else {
            console.log(`Tab ${tabId} content already loaded, skipping.`);
        }
    }

    // 页面加载完成后，首先加载当前激活的标签页（TAB1）的内容
    const initialActiveTabId = $('.nav-link.active.show').attr('href'); // 获取当前激活标签的href，如 '#tab1'
    const initialContentUrl = initialActiveTabId.replace('#', '') + '.php'; // 构造对应的PHP文件路径，如 'tab1.php'
    loadTabContent(initialActiveTabId, initialContentUrl);

    // 监听Bootstrap标签页的切换事件
    // 'shown.bs.tab' 事件在新的标签页被显示后（CSS过渡完成后）触发
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        const targetTabId = $(e.target).attr('href'); // 获取被激活标签的href，如 '#tab2'
        const contentUrl = targetTabId.replace('#', '') + '.php'; // 构造对应的PHP文件路径，如 'tab2.php'
        loadTabContent(targetTabId, contentUrl);
    });
});