Ce billet relate les éléments essentiels permettant la réalisation grâce à la bibliothèque Jquery UI d'un menu à onglets. Il s'appuie sur la documentation  officielle consultable ici.

Cet exemple s'appuie sur 2 fichiers qui s'exécutent côté client : index.html et index.js

Aperçu en live à tester

Le fichier index.html produit l'affichage ci-contre.
Dans l' entête s'effectue la liaison avec les "bibliothèques" CSS '(thême Cupertino)  et javascript ( jquery.js , jqueryui.js), ainsi que le lien avec notre script index.js.

Index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Menu à onglets</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/j...">
     
    <!--   les scripts ------------------>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="index.js"></script>

</head>

    <body>  
        <div>
            <div id="onglets">
                <ul>
                    <li title="onlet-0"><a href="#onglet-0">onglet 0</a></li>
                    <li title="onlet-1"><a href="#onglet-1">onglet 1</a></li>
                    <li title="onlet-2"><a href="#onglet-2">onglet 2</a></li>
                </ul>
                <div id="onglet-0">
                    <!--contenu qui s'affiche dans cet onglet -->
                    je m'affiche dans l'onglet 0
                </div>
                <div id="onglet-1">
                    <!--contenu qui s'affiche dans cet onglet -->
                    je m'affiche dans l'onglet 1
                </div>
                <div id="onglet-2">
                    <!--contenu qui s'affiche dans cet onglet -->
                    je m'affiche dans l'onglet 2
                </div>
            </div> <!-- fin des onglets -->
        </div>
 </body>
</html>

Le script "index.js", dont le code est affiché ci-contre, se contente de définir le contenu de la méthode tabs() de la bibliothèque jquery-ui. Dans ce script la méthode est appliquée sur la balise div identifiée "onglets" définie dans le fichier index.html ( <div id="onglets"> </div>)

Le script ci-dessous est une variante dans laquelle certaines propriétés de la méthode sont définies.

index.js

    $(function() {   
            $( "#onglets" ).tabs({
            });
});
$( "#onglets" ).tabs({
        active :1,                 // l'onglet 1 est actif
    event: "click",        //"mouseover"
        effect: "explode",    // style d'affichage de l'onglet
        duration: 1000,
         hide:'fade', //,{ effect: "explode", duration: 1000 }
         show: { effect: "blind", duration: 800 }, //'fade'
 });

Quelques autres propriétés intéressantes de cette méthode :

  •     disabled: , // entre crochets les index des onglets à dévalider.
  •     collapsible : true, // "cache" le contenu de l'onglet  actif lors du clic

    //