Afficher des contenus dans un élément avec jquery

Sur base du code du premier tutoriel, qui plaçait le code de base html et cs, nous pouvons maintenant intégrer des fonctions en javascript, et plus précisément jquery.

1/4 | Suivant

1) Avant tout, télécharger et placer jQuery

Avant de coder, on ira chercher la dernière version de jQuery. La version compressée pour la production est celle qui nous intéresse. Téléchargez-làet placez le fichier dans le dossier du site.

Dans la foulée, on crée un fichier script.js dans lequel on placera notre code.
On obtient la structure suivante :

Dans le code html, on charge les deux fichiers javascript dans le head de la page, comme ceci

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Un site en une page</title>
        <link rel="stylesheet" href="style.css">
        <!-- jquery d'abord ! -->
        <script src="jquery-3.4.1.min.js"></script>
        <script src="script.js"></script>
    </head>

2) Formuler clairement ce qu’on veut coder

Une des bases de l’écriture du code, c’est d’être capable d’énoncer de la manière la plus précise possible ce qu’on veut coder.
Dans notre cas, c’est assez simple :

Pour pouvoir tester ce code, nous devons créer des contenus minimaux àafficher.

Pour cela, on va placer un peu de html dans la partie #contenus :

            <section id="contenus">
                <button id="close">Fermer</button>
                <article id="contenu1">
                    <h2>Contenu numéro 1</h2>
                </article>
                <article id="contenu2">
                    <h2>Contenu numéro 2</h2>
                </article>
                <article id="galerie">
                    <h2>La galerie</h2>
                </article>
            </section>

Tous les liens de la navigation se comportent de la même manière : ils provoquent l’affichage d’un contenu spécifique. On peut donc employer une même commande pour tous les liens qui dit "affiche cet article dans la partie #contenus" mais il faut créer un lien logique entre un lien et son contenu. Pour ça on va employer l’attribut "data-contenu" (voir la documentation sur Mozilla) comme ceci :

<header>
    <h1>Titre principal</h1>
    <nav>
        <ul>
            <li><a href="#" data-contenu="#contenu1">Information 1</a></li>
            <li><a href="#" data-contenu="#contenu2">Information 2</a></li>
             <li><a href="#" data-contenu="#galerie">Galerie</a></li>
        </ul>
    </nav>
</header>

Remarquez que le contenu de l’attribut "data-contenu" correspond aux attribut "id" des articles créés plus haut. C’est ce qui permet de faire la correspondance entre les deux éléments pour le code javascript.
Nous somme maintenant prêt àcoder.

Le code javascript

La version minimale de notre code va faire ceci :
– au chargement de la page, cacher #contenus
– quand on clique sur un des liens, cacher tous les articles de #contenus, et n’afficher que celui lié au clic
– puis afficher #contenus

Comme cette fenêtre apparait par dessus une image, on va donner la possibilité de la fermer par un clic.
On a déjàajouté un élément de type "button" directement dans le tag #contenus, on va ajouter dans javascript le code correspondant

Ça donne ça

$(document).ready(function(){ // quand la page est chargée entièrement, juste avant de l'afficher
    $("#contenus").hide(); // cacher #contenus
    $("nav a").click(function(){ // quand on clique sur les liens de la navigation
        // récupérer le contenu de data-contenu pour le lien cliqué
        var lequel=$(this).attr("data-contenu"); 
        $("#contenus article").hide(); // cacher les articles
        $(lequel).show(); // montrer celi qui correspond au clic
        $("#contenus").fadeIn(500); // afficher #contenus
    });

    // le bouton close
    $("#close").click(function(){
        $("#contenus").fadeOut("500");
    });
});

Et c’est fait.