Créer des onglets avec jquery

Une utilisation assez standard de jquery est celle d’onglets. Ils permettent d’afficher facilement plus d’information dans peu d’espace. Il existe des centaines de façons de coder des onglets, et jquery possède même dans ses librairies "UI" des fonctions prètes à l’emploi. Cet exemple est donc surtout pédagogique, mais il est aussi fonctionnel.

Précédent | 5/10 | Suivant

Le code :

<!DOCTYPE html>
<html lang="fr">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Des onglets</title>

       <script src="jquery-3.1.1.min.js"></script>
       <style>
           ul,li {
               margin:0;
               padding:0;
               list-style-type: none;
           }
           #onglets {
               display:flex;
           }
           #onglets li {
               padding:10px;
               background-color:#ddd;
               border-radius:6px 6px 0 0;
               margin-right:2px;
               cursor:pointer;
           }
           #onglets li:hover {
               background-color:#ccc;
           }
           #contenus div {
               padding:20px;
               background-color:#ddd;
               min-height:300px;
           }
       </style>
   </head>

   <body>
       <ul id="onglets">
           <li class="actuel" data-tab="tab1">Tab 1</li>
           <li data-tab="tab2">Tab 2</li>
           <li data-tab="tab3">Tab 3</li>
       </ul>
       <section id="contenus">
           <div id="tab1">Contenu du tab 1</div>
           <div id="tab2">Contenu du tab 2</div>
           <div id="tab3">Contenu du tab 3</div>
       </section>

       <script>
           $(document).ready(function(){
               active_tab();
               $("#onglets li").click(function(){
                   if(! $(this).hasClass("actuel")){
                       $(this).addClass("actuel").siblings().removeClass("actuel");
                       active_tab();
                   }
               });
           });
           function active_tab(){
               var lequel=$("#onglets .actuel").attr("data-tab");
               $("#"+lequel).show().siblings().hide();
           }
       </script>
   </body>
</html>