多个选项卡，相互不影响
<style>
.xxk-content > div {
display: none;
}
.xxk-content > div.active {
display: block;
}
.xxk-bt button.active {
background-color: #ddd; /* Add your active button styles here */
}
</style>
<div class="xxk02 tab-group">
<div class="xxk-bt">
<button data-tab="1">01</button>
<button data-tab="2">02</button>
<button data-tab="3">03</button>
</div>
<div class="xxk-content">
<div data-content="1">Content for 01</div>
<div data-content="2">Content for 02</div>
<div data-content="3">Content for 03</div>
</div>
</div>
<div class="xxk03 tab-group">
<div class="xxk-bt">
<button data-tab="1">01</button>
<button data-tab="2">02</button>
<button data-tab="3">03</button>
</div>
<div class="xxk-content">
<div data-content="1">Content for 01</div>
<div data-content="2">Content for 02</div>
<div data-content="3">Content for 03</div>
</div>
</div>
<div class="xxk04 tab-group">
<div class="xxk-bt">
<button data-tab="1">01</button>
<button data-tab="2">02</button>
<button data-tab="3">03</button>
</div>
<div class="xxk-content">
<div data-content="1">Content for 01</div>
<div data-content="2">Content for 02</div>
<div data-content="3">Content for 03</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabGroups = document.querySelectorAll('.tab-group');
tabGroups.forEach(group => {
const buttons = group.querySelectorAll('.xxk-bt button');
const contents = group.querySelectorAll('.xxk-content > div');
buttons.forEach(button => {
button.addEventListener('click', function() {
const tab = this.getAttribute('data-tab');
// Remove active class from all buttons in this group
buttons.forEach(btn => btn.classList.remove('active'));
// Hide all content divs in this group
contents.forEach(content => content.classList.remove('active'));
// Add active class to the clicked button
this.classList.add('active');
// Show the corresponding content div
group.querySelector(`.xxk-content > div[data-content="${tab}"]`).classList.add('active');
});
});
// Optionally, activate the first tab by default
buttons[0].classList.add('active');
contents[0].classList.add('active');
});
});
</script>
