Aide Code HTML et CSS

Question

gagara

21 Nov 2024 à 05:21

Bonjour je ne sais pas si je suis au bonne endroit mais j'ai besoin d'aide pour projet de présentation et j'aimerai savoir si on peut ajouter une animation au code suivant :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css"> /\* Style CSS pour les onglets \*/ .tab-container { display: flex; align-items: flex-start; } &#x200B; .tabs { flex: 1; flex-direction: column; } &#x200B; .tab-button { display: flex; flex-direction: column; padding: 10px 20px; cursor: pointer; border: none; font-family: "LOREM IPSUM", sans-serif; /\* Police "LOREM IPSUM" \*/ opacity: 0.7; transition: opacity 0.3s, background-color 0.3s; color: inherit; /\* Couleur de texte inherit \*/ font-size: 18px; /\* Taille de police à 16 pixels \*/ } &#x200B; .tab-button.tab1 { color: #88BC59; background-color: #FFFFFF; } &#x200B; .tab-button.tab2 { color: #66B3A6; background-color: #FFFFFF; } &#x200B; .tab-button.tab3 { color: #51AFC6; background-color: #FFFFFF; } &#x200B; .tab-button.tab4 { color: #3A90CF; background-color: #FFFFFF; } &#x200B; .tab-button.tab5 { color: #495FA9; background-color: #FFFFFF; } &#x200B; .tab-button.active { opacity: 1; background-color: #FFFFFF; } &#x200B; .tab-content { display: none; padding: 12px; border: 0px solid #888; font-family: "LOREM IPSUM", sans-serif; /\* Police "LOREM IPSUM" \*/ font-size: 18px; /\* Taille de police à 16 pixels \*/ color: inherit; /\* Couleur de texte inherit \*/ } &#x200B; /\* Style CSS pour les différentes couleurs des tab-content \*/ .tab-content.tab1 { color: #88BC59; /\* Couleur pour l'onglet 1 (Vert) \*/ } &#x200B; .tab-content.tab2 { color: #66B3A6; /\* Couleur pour l'onglet 2 (Turquoise) \*/ } &#x200B; .tab-content.tab3 { color: #51AFC6; /\* Couleur pour l'onglet 3 (Bleu clair) \*/ } &#x200B; .tab-content.tab4 { color: #3A90CF; /\* Couleur pour l'onglet 4 (Bleu foncé) \*/ } &#x200B; .tab-content.tab5 { color: #495FA9; /\* Couleur pour l'onglet 5 (Violet) \*/ } </style>

</head>

<body>

<div class="tab-container">

<div class="tabs">

<button class="tab-button tab1" onmouseover="showTab('tab1')" style="font-size: 24px; font-weight: bold;">1</button>

<button class="tab-button tab2" onmouseover="showTab('tab2')" style="font-size: 24px; font-weight: bold;">2</button>

<button class="tab-button tab3" onmouseover="showTab('tab3')" style="font-size: 24px; font-weight: bold;">3</button>

<button class="tab-button tab4" onmouseover="showTab('tab4')" style="font-size: 24px; font-weight: bold;">4</button>

<button class="tab-button tab5" onmouseover="showTab('tab5')" style="font-size: 24px; font-weight: bold;">5</button>

</div>

<div class="content-container">

<div class="tab-content tab1" id="tab1">

<p>blablat</p>

<p>blablat</p>

</div>

<div class="tab-content tab2" id="tab2">

<p>blablat</p>

<p>blablat</p>

<p>blablat</p>

</div>

<div class="tab-content tab3" id="tab3">

<p>bla bla bla bla</p>

<p>bla bla bla</p>

</div>

<div class="tab-content tab4" id="tab4">

<p>bla bla bla bla</p>

<p>bla bla bla</p>

<p style="line-height: 0;">pas intéressant :.</p>

<p style="line-height: 0,5; font-size: 14px;"><i>loremm ipsum s</i></p>

</div>

<div class="tab-content tab5" id="tab5">

<p>bla bla bla bla</p>

<p>bla bla bla</p>

</div>

</div>

</div>

<script> function showTab(tabId) { // Cacher tous les onglets const tabContents = document.querySelectorAll('.tab-content'); tabContents.forEach(tab => tab.style.display = 'none'); &#x200B; // Afficher l'onglet sélectionné const selectedTab = document.getElementById(tabId); if (selectedTab) { selectedTab.style.display = 'block'; } } </script>

</body>

</html>

Prévenir un modérateur

Répondre au sujet

Sémantique web et HTML

Aide Code HTML et CSS