Panel d'onglets en CSS le plus simple

Il est possible de réaliser simplement une barre d'onglets pour une page Web, en CSS, avec quelques lignes de JavaScript optionnels, sans utiliser de framework Ajax.

Comment cela fonctionne

A chaque onglet on associe l'URL d'une page à charger. Les onglets sont construits chacun autour d'une balise de lien, donc cliquer sur un onglet reviendra à cliquer sur un lien.

On peut utiliser ces onglets sans aucun code JavaScript si chaque page le même panel d'onglets que l'on a construit est reproduit sur chaque page que l'on veut charger et si si chacune se charge en remplaçant la page courante.
Mais si l'on veut charger les pages dans une iframe, sans quitter la page courante, du code JavaScript servira à lire dans l'onglet l'URL de la page à charger pour l'assigner à la propriété src de l'iframe.

Les deux cas seront montrés dans les démonstrations.

Le code CSS

L'utilisation des balises <li> et <a> nous facilite la tâche pour rendre le code plus clair.

La structure du TabPanel est la suivante:

<div id="tabs">
    <ul>
        <li><a href="#" rel="url1">Libellé 1</a></li> 
        <li><a href="#" rel="url2">Libellé 2</a></li> 
    </ul>
</div>

<iframe id="container"></iframe>

Ce sera le rôle exclusif des descripteurs CSS de transformer la liste ci-dessus en une barre d'onglets horizontale.
La liste est encapsulée dans un <div> de sorte que le style donné aux balise <ul> et <li> soit local au <div> et ne s'applique pas à toute la page.

Onglets sans JavaScript

Le code JavaScript est utile pour deux choses:

On peut se passer de JavaScript si la page chargée remplace la page courante. Se sera le cas si on utilise des onglets comme menu d'un site Web. Grâce à la construction de TabPanel basée sur des balises <a>, le fait de cliquer sur un onglet revient à cliquer sur un lien pour charger une autre page à la place de la page courante.

Toutes les pages affichent le même menu d'onglets avec une différence: dans la présentation de chaque page, l'onglet qui lui correspond est mis en relief par l'assignation de la classe "selected" qui a un descripteur dans la feuille de style:

<li><a href="#" rel="url1" class="selected">Libellé 1</a></li>

Un exemple est donné dans la démo avec l'onglet No Script. La page fournit plus de détails.

Chargement des pages en iframe

Deux fonctions JavaScript suffisent.

A chaque onglet, on associe un événement onclick qui passe à la fonction loadit la source de l'appel.

<li><a href="#" rel="tab-dom.html" onClick="loadit(this)">DOM</a></li>

Fonction loadit: Charger une page correspondant à un onglet

    var container = document.getElementById('container');
    container.src=element.rel;

    var tabs=document.getElementById('tabs').getElementsByTagName("a");
    for (var i=0; i < tabs.length; i++)
    {
        if(tabs[i].rel == element.rel) 
           tabs[i].className="selected";
        else
           tabs[i].className="";
    }

Pour modifier l'apparence de l'onglet actif on place l'URL de toutes les balises <a> encapsulées dans "tabs" dans un tableau et l'on les compare tout à tour avec l'attribut rel de l'onglet sélectionné.
Pour la page choisie on associe la classe "selected", aucune classe pour les autres.

Fonction startit: Au démarrage charger la page par défaut

Cette fonction est exécutée au chargement de la page, elle place les URL du TabPanel dans un tableau et assigne l'URL de la page courante à l'attribut rel de l'objet dont l'ID est "container". 

function startit()
{
    var tabs=document.getElementById('tabs').getElementsByTagName("a");
    var container = document.getElementById('container');
    container.src = tabs[0].rel;
}

window.onload=startit;

L'utilisation de onload permet de différer le chargement après que le DOM soit construit.

Compatibilité

Sous Internet Explorer, l'affichage est incorrect avec le DocType transitionnel et est correct avec ce DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

ou:

<!DOCTYPE html>

Démonstration

© 2009-2015 Xul.fr