Créer une boîte d'onglets à la mode Web 2.0 avec jQuery Partie 2 : le code JavaScript

Voici la base à partir de laquelle nous allons travailler :

Les codes HTML et CSS correspondants sont disponibles ici

Les éléments que nous recherchons se nomment :

• <a href="/" id="tab_1" class="active">
• <div id="content_1" class="content">

En JavaScript, nous pouvons trouver un élément en utilisant seulement son identifiant et la méthode : document.getElementById(). Ainsi, document.getElementById('content_1') va nous retourner l'élément correspondant au premier onglet. Il suffit alors de modifier le style pour mettre la valeur display:none à display:block :

document.getElementById('content_1').style.display = 'none';

Afin de modifier l'onglet actif, il suffit de modifier le nom de sa classe comme suit :

document.getElementById('tab_1').className = 'active';

Voici donc le code simple et complet pour une implémentation de base de votre gestionnaire d'onglets :

function ChangeOnglet(onglet, contenu) 
{   
    document.getElementById('content_1').style.display = 'none';
    document.getElementById('content_2').style.display = 'none';
    document.getElementById('content_3').style.display = 'none';       
    document.getElementById(contenu).style.display = 'block';       
 
    document.getElementById('tab_1').className = '';
    document.getElementById('tab_2').className = '';
    document.getElementById('tab_3').className = '';       
    document.getElementById(onglet).className = 'active';       
}

Il suffit maintenant d'ajouter le déclenchement de cette fonction sur le clic des onglets :

<script src="functions.js" type="text/javascript"></script>   
<ul class="tabs">
    <li><a href="javascript:ChangeOnglet('tab_1', 'content_1');" id="tab_1" class="active">Astuces</a></li>
    <li><a href="javascript:ChangeOnglet('tab_2', 'content_2');" id="tab_2">Tutoriaux</a></li>
    <li><a href="javascript:ChangeOnglet('tab_3', 'content_3');" id="tab_3">Articles</a></li>
</ul>

Cliquez sur le lien suivant afin de voir le résultat : Voir le résultat.

Si vous ajoutez d'autres onglets, vous devrez modifier votre script, ce qui n'est pas très professionnel. Nous allons donc créer un script qui va fonctionner quel que soit le nombre d'onglets ainsi que leur identifiant.

function ChangeOnglet_2(active, nombre, tab_prefix, contenu_prefix) 
{   
    for (var i=1; i < nombre + 1; i++) 
    {
        document.getElementById(contenu_prefix + i).style.display = 'none';
        document.getElementById(tab_prefix + i).className = '';
    }  
 
    document.getElementById(contenu_prefix+active).style.display = 'block';
    document.getElementById(tab_prefix+active).className = 'active';   
}

Notre seconde version demande quelques paramètres supplémentaires, mais cela est plus avantageux au final. Cela vous permet maintenant, peu importe le nom et le nombre d'onglets, de faire fonctionner votre gestionnaire d'onglets.

• Le premier argument « active » représente le numéro de l'onglet actif.
• Le deuxième argument « nombre » représente le nombre d'onglets de votre boîte.
• Les 2 derniers arguments « tab_prefix » et « contenu_prefix » représentent le préfixe utilisé par les identifiants de vos onglets et de vos boîtes de contenu.

Voici maintenant comment appeler la fonction :

<script src="functions.js" type="text/javascript"></script>   
<ul class="tabs">
    <li><a href="javascript:ChangeOnglet_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Astuces</a></li>
    <li><a href="javascript:ChangeOnglet_2(2, 3, 'tab_', 'content_');" id="tab_2">Tutoriaux</a></li>
    <li><a href="javascript:ChangeOnglet_2(3, 3, 'tab_', 'content_');" id="tab_3">Articles</a></li>
</ul>

Cette fonction vous permet aussi de l'utiliser sur une autre boîte d'onglets en modifiant l'appellation de la fonction seulement. Je n'ai pas inséré d'exemple, car le rendu est le même que la première solution.

Passons maintenant aux choses sérieuses afin d'obtenir un rendu Web 2.0 (affichage du contenu avec une animation). Bien sûr il existe déjà une multitude de scripts ou de librairies qui font office de gestionnaire d'onglets. Mais il est utile de savoir le développer soi même. Par contre, afin d'ajouter notre petite touche Web 2.0, nous allons utiliser la librairie jQuery.

Tout d'abord, commencer par télécharger la librairie jQuery : Télécharger.
jQuery offre beaucoup de fonctions permettant de sélectionner des éléments. Par exemple, si vous désirez sélectionner tous les éléments d'une page qui sont des liens <a> et les faire disparaître, il suffit d'effectuer la fonction suivante :

<script type="text/javascript" src="/scripts/jquery-1.2.3.min.js">
<script type="text/javascript">   
    // Une fois le chargment de la page terminé ...
    $(document).ready(  function()
                        {
                            $("a").slideUp();
                        }
                    );
</script>

Utilisons maintenant cette astuce avec nos onglets :

<script type="text/javascript" src="/scripts/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
    // Une fois le chargment de la page terminé ...
    $(document).ready(  function()
                        {
                            // Lorsqu'un lien a.tab est cliqué
                            $("a.tab").click(   function () 
                                                {
                                                    // Mettre tous les onglets non actifs
                                                    $(".active").removeClass("active");
 
                                                    // Mettre l'onglet cliqué actif
                                                    $(this).addClass("active");
 
                                                    // Cacher les boîtes de contenu
                                                    $(".content").slideUp();
 
                                                    // Pour afficher la boîte de contenu associé, nous
                                                    // avons modifié le titre du lien par le nom de
                                                    // l'identifiant de la boite de contenu
                                                    var contenu_aff = $(this).attr("title");
                                                    $("#" + contenu_aff).slideDown();
                                                }
                                              );
                        }
                    );
</script>

Pour ce qui est de la partie HTML, laissez-la comme suit :

<ul class="tabs">
    <li><a href="#" title="content_1" class="tab active">Astuces</a></li>
    <li><a href="#" title="content_2" class="tab">Tutoriaux</a></li>
    <li><a href="#" title="content_3" class="tab">Articles</a></li>
</ul>

Cliquez sur le lien suivant afin de voir le résultat : résultat.
Voilà, c'est ce qui termine notre tutoriel sur les onglets. J'espère que le tout est clair pour vous. Si vous avez des questions, ne vous gênez pas, nous sommes là pour vous.

Tous mes remerciements à romaintaz pour sa relecture.