js怎么实现tab切换

<div class="tab-container">
    <div class="tab-buttons">
        <button class="tab-button active" data-tab="tab1">Tab 1</button>
        <button class="tab-button" data-tab="tab2">Tab 2</button>
        <button class="tab-button" data-tab="tab3">Tab 3</button>
    </div>
    <div class="tab-content">
        <div id="tab1" class="tab-pane active">
            Content for Tab 1
        </div>
        <div id="tab2" class="tab-pane">
            Content for Tab 2
        </div>
        <div id="tab3" class="tab-pane">
            Content for Tab 3
        </div>
    </div>
</div>

.tab-container {
    width: 100%;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
}

.tab-button.active {
    background-color: #f0f0f0;
    border-bottom: 2px solid #007bff;
}

.tab-content {
    padding: 20px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');

            // Remove active class from all buttons and panes
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabPanes.forEach(pane => pane.classList.remove('active'));

            // Add active class to the clicked button and corresponding pane
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
});