u

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);
+      }
+    });
+  });
+});