function switchTab(group, tabId) { const tablist = document.getElementById('tablist' + group); if (!tablist) return; const tabs = tablist.querySelectorAll('[role="tab"]'); tabs.forEach(t => { const isTarget = t.getAttribute('aria-controls') === 'panel' + group + '-' + tabId; t.setAttribute('aria-selected', isTarget ? 'true' : 'false'); t.classList.toggle('active', isTarget); }); const panels = tablist.closest('.bg-white') ? tablist.closest('.bg-white').querySelectorAll('[role="tabpanel"]') : tablist.parentElement.parentElement.querySelectorAll('[role="tabpanel"]'); panels.forEach(p => p.classList.toggle('hidden', p.id !== 'panel' + group + '-' + tabId)); } function switchTabAnimated(group, tabId, btn) { const tablist = document.getElementById('tablist' + group); if (!tablist) return; const tabs = tablist.querySelectorAll('[role="tab"]'); tabs.forEach(t => { t.setAttribute('aria-selected', 'false'); t.style.background = ''; t.style.border = ''; t.style.color = ''; }); btn.setAttribute('aria-selected', 'true'); btn.style.background = 'white'; btn.style.border = '1px solid #e5e7eb'; btn.style.borderBottom = '1px solid white'; btn.style.color = '#1e293b'; const panels = tablist.parentElement.parentElement.querySelectorAll('[role="tabpanel"]'); panels.forEach(p => { const isTarget = p.id === 'panel' + group + '-' + tabId; if (isTarget) { p.classList.remove('hidden'); p.classList.add('tp-panel-enter'); const si = p.querySelectorAll('.stagger-item'); si.forEach((it, i) => { it.style.animation = 'none'; it.offsetHeight; it.style.animation = ''; }); } else { p.classList.add('hidden'); p.classList.remove('tp-panel-enter'); } }); }