31 lines
1.2 KiB
JavaScript
31 lines
1.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const tabsContainer = document.querySelector('#human-in-loop-tabs');
|
|
if (!tabsContainer) return;
|
|
|
|
const tabs = tabsContainer.querySelectorAll('.tab-button');
|
|
const contents = tabsContainer.querySelectorAll('.tab-content');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const target = tab.getAttribute('data-tab');
|
|
|
|
// Deactivate all tabs and hide all content
|
|
tabs.forEach(t => {
|
|
t.classList.remove('active-tab', 'border-black', 'text-gray-900');
|
|
t.classList.add('text-gray-500', 'border-transparent');
|
|
});
|
|
contents.forEach(c => {
|
|
c.classList.add('hidden');
|
|
});
|
|
|
|
// Activate the clicked tab and show its content
|
|
tab.classList.add('active-tab', 'border-black', 'text-gray-900');
|
|
tab.classList.remove('text-gray-500', 'border-transparent');
|
|
|
|
const activeContent = tabsContainer.querySelector(`#${target}`);
|
|
if (activeContent) {
|
|
activeContent.classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
}); |