html

[soulaymanediallo391-dotcom]

<title>Interface à onglets</title> <style> .container { max-width: 600px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }

    .tab-bar {
        display: flex;
        gap: 5px;
        margin-bottom: 20px;
    }
    
    .tab-button {
        padding: 10px 20px;
        background-color: #f0f0f0;
        border: none;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
    }
    
    .tab-button.active {
        background-color: #007BFF;
        color: white;
    }
    
    .tab-content {
        display: none;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 0 5px 5px 5px;
    }
    
    .tab-content.active {
        display: block;
    }
</style>

Texte Image Vidéo

    <div id="text" class="tab-content active">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
    <div id="image" class="tab-content">
        <img src="https://via.placeholder.com/400x300" alt="Exemple" style="max-width: 100%;">
    </div>
    
    <div id="video" class="tab-content">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<script>
    function showTab(tabId) {
        // Cacher tous les contenus
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.remove('active');
        });
        
        // Désactiver tous les boutons
        document.querySelectorAll('.tab-button').forEach(button => {
            button.classList.remove('active');
        });
        
        // Afficher l'onglet sélectionné
        document.getElementById(tabId).classList.add('active');
        
        // Activer le bouton correspondant
        event.target.classList.add('active');
    }
</script>