45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
// 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);
|
|
}
|
|
});
|
|
});
|
|
});
|