Function switchTab

front/common.js:959–1033

(tabName)

});

function switchTab(tabName) {
    // 获取当前活动的内容区域
    const currentContent = document.querySelector('.tab-content.active');
    const targetContent = document.getElementById(tabName + 'Tab');

    // 如果点击的是当前标签页，不做任何操作
    if (currentContent === targetContent) return;

    // 找到目标标签按钮
    const targetTab = event && event.target ? event.target :
        document.querySelector(`.tab[onclick*="'${tabName}'"]`);

    // 移除所有标签页的active状态
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));

    // 添加当前点击标签的active状态
    if (targetTab) {
        targetTab.classList.add('active');
        // 更新滑块位置（带动画）
        updateTabSlider(targetTab, true);
    }

    // 淡出当前内容
    if (currentContent) {
        // 设置淡出过渡
        currentContent.style.transition = 'opacity 0.18s ease-out, transform 0.18s ease-out';
        currentContent.style.opacity = '0';
        currentContent.style.transform = 'translateX(-12px)';

        setTimeout(() => {
            currentContent.classList.remove('active');
            currentContent.style.transition = '';
            currentContent.style.opacity = '';
            currentContent.style.transform = '';

            // 淡入新内容
            if (targetContent) {
                // 先设置初始状态（在添加 active 类之前）
                targetContent.style.opacity = '0';
                targetContent.style.transform = 'translateX(12px)';
                targetContent.style.transition = 'none'; // 暂时禁用过渡

                // 添加 active 类使元素可见
                targetContent.classList.add('active');

                // 使用双重 requestAnimationFrame 确保浏览器完成重绘
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        // 启用过渡并应用最终状态
                        targetContent.style.transition = 'opacity 0.25s ease-out, transform 0.25s ease-out';
                        targetContent.style.opacity = '1';
                        targetContent.style.transform = 'translateX(0)';

                        // 清理内联样式并执行数据加载
                        setTimeout(() => {
                            targetContent.style.transition = '';
                            targetContent.style.opacity = '';
                            targetContent.style.transform = '';