js标签卡切换

// 使用事件委托优化事件处理
document.querySelector('.tab-container').addEventListener('click', function(event) {
    if (event.target.classList.contains('tab')) {
        const targetTab = event.target.getAttribute('data-tab');
        showTabContent(targetTab);
    }
});

function showTabContent(tabId) {
    // 隐藏所有内容区域
    document.querySelectorAll('.tab-content').forEach(content => {
        content.style.display = 'none';
    });
    // 显示目标内容区域
    document.getElementById(tabId).style.display = 'block';
}

/* 避免使用会引起重绘和回流的CSS属性 */
.tab-content {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

function showTabContent(tabId) {
    document.querySelectorAll('.tab-content').forEach(content => {
        content.style.display = 'none';
    });
    document.getElementById(tabId).style.display = 'block';
}

document.querySelector('.tab-container').addEventListener('click', function(event) {
    if (event.target.classList.contains('tab')) {
        const targetTab = event.target.getAttribute('data-tab');
        showTabContent(targetTab);
    }
});