diff --git a/projets/script.js b/projets/script.js new file mode 100644 index 0000000..f426eec --- /dev/null +++ b/projets/script.js @@ -0,0 +1,57 @@ +document.addEventListener('DOMContentLoaded', function() { + const tabs = document.querySelectorAll('.tab'); + const panels = document.querySelectorAll('.tab-panel'); + const searchBar = document.querySelector('.search-bar'); + + // Fonction pour retirer le surlignage de tous les items d'un panel + function clearHighlights(panel) { + panel.querySelectorAll('.checklist li').forEach(li => { + li.classList.remove('highlight'); + }); + } + + // Gestion des onglets + tabs.forEach((tab, idx) => { + tab.addEventListener('click', function() { + tabs.forEach(t => t.classList.remove('active')); + this.classList.add('active'); + panels.forEach((panel, pIdx) => { + if (idx === pIdx) { + panel.classList.add('active'); + clearHighlights(panel); + } else { + panel.classList.remove('active'); + } + }); + // Réinitialise la recherche lors du changement d'onglet + searchBar.value = ''; + }); + }); + + // Recherche avec surlignage et switch automatique d'onglet si besoin + searchBar.addEventListener('input', function() { + const query = this.value.toLowerCase(); + let foundInCurrent = false; + let foundInOther = -1; + + panels.forEach((panel, idx) => { + let found = false; + panel.querySelectorAll('.checklist li').forEach(li => { + const text = li.textContent.toLowerCase(); + if (query && text.includes(query)) { + li.classList.add('highlight'); + found = true; + } else { + li.classList.remove('highlight'); + } + }); + if (found && panel.classList.contains('active')) foundInCurrent = true; + if (found && !panel.classList.contains('active') && foundInOther === -1) foundInOther = idx; + }); + + // Si pas trouvé dans l'onglet actif mais trouvé ailleurs, switch d'onglet + if (!foundInCurrent && foundInOther !== -1) { + tabs[foundInOther].click(); + } + }); +});