tab切换 js

document.querySelectorAll('.tab-button').forEach(button => {
    button.addEventListener('click', () => {
        document.querySelectorAll('.tab-content').forEach(content => {
            content.style.display = 'none';
        });
        document.querySelector(`#${button.dataset.tab}`).style.display = 'block';
    });
});

document.querySelectorAll('.tab-button').forEach(button => {
    button.addEventListener('click', () => {
        const tabId = button.dataset.tab;
        fetch(`/api/content/${tabId}`)
            .then(response => response.json())
            .then(data => {
                document.querySelector(`#${tabId}`).innerHTML = data.content;
            })
            .catch(error => console.error('Error:', error));
    });
});

.tab-content {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    display: none;
}

.tab-content.active {
    display: block;
    opacity: 1;
}

document.querySelectorAll('.tab-button').forEach(button => {
    button.addEventListener('click', () => {
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.remove('active');
        });
        document.querySelector(`#${button.dataset.tab}`).classList.add('active');
    });
});