diff --git a/js/tabs.js b/js/tabs.js new file mode 100644 index 0000000..05c742f --- /dev/null +++ b/js/tabs.js @@ -0,0 +1,44 @@ +// tabs.js +document.addEventListener('DOMContentLoaded', () => { + // Pobierz wszystkie linki zakładek i sekcje zawartości + const tabLinks = document.querySelectorAll('.tab-link'); + const tabContents = document.querySelectorAll('.tab-content'); + + // Funkcja do przełączania zakładek + function switchTab(event) { + event.preventDefault(); + + // Usuń klasę 'active' ze wszystkich linków zakładek + tabLinks.forEach(link => link.classList.remove('active')); + + // Usuń klasę 'active' ze wszystkich sekcji zawartości + tabContents.forEach(content => content.classList.remove('active')); + + // Dodaj klasę 'active' do klikniętego linku + const clickedLink = event.currentTarget; + clickedLink.classList.add('active'); + + // Pobierz ID sekcji, którą należy aktywować (z atrybutu data-tab) + const tabId = clickedLink.getAttribute('data-tab'); + + // Aktywuj odpowiednią sekcję zawartości + const activeContent = document.getElementById(tabId); + if (activeContent) { + activeContent.classList.add('active'); + } + } + + // Dodaj nasłuchiwanie zdarzeń do każdego linku zakładki + tabLinks.forEach(link => { + // Obsługa kliknięcia myszą + link.addEventListener('click', switchTab); + + // Obsługa klawiatury (Enter lub Spacja) + link.addEventListener('keydown', (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + switchTab(event); + } + }); + }); +});