Panneaux à onglets pour une application HTML

Des onglets CSS et JavaScript pour présenter des contenus alternatifs dans une page, sans iframes ni hyperliens.

Cette technique convient mieux pour une interface d'application, en ligne ou hors ligne. Elle consiste à présenter un seul contenu à la fois, parmi plusieurs présents dans une même page. L'accès a ces contenus se fait à partir d'onglets. La différence avec le script d'onglets déjà décrit, est qu'on ne recourt pas à des iframes et qu'on ne place pas non plus de liens dans les onglets.

A titre de bonus, on donne cette fois aux onglets des angles arrondis, grâce à deux lignes de code CSS.

border-top-left-radius:6px;
border-top-right-radius:6px;

L'exemple d'application du script affiche soit une image SVG, soit le code source SVG de cette image.

Les onglets sont réalisés avec des balises <li>. Le mode d'affichage display:inline fait disparaître les puces en même temps qu'il place les éléments sur une même ligne.

Code HTML:

<div id="tabs">
    <ul>
        <li onClick="selView(1, this)">SVG Image</li>
        <li onClick="selView(2, this)">Source code</li>
    </ul>
</div>

<div id="tabcontent">
  <div id="svgpic" class="tabpanel" style="display:inline">
  <div id="source" class="tabpanel" style="display:none">
</div>

Code CSS:

#tabs ul li 
{
    display:inline-block;
    float:left;
    height:24px;
    min-width:80px;
    text-align:center;
    line-height: 22px;
    padding:0 8px 0 8px;
    margin: 1px 0px 0px 0px;
    border: 1px solid gray;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;	
    background:#F0F0F0;
}

Au dessous des onglets on place un conteneur d'ID tabcontent, qui contient plusieurs panneaux de classe tabpanel. Le conteneur à l'attribut position:relative et les panels l'attribut position:absolute. Ils sont tous placé en position 0 dans le conteneur, et grâce à la propriété display, un seul est affiché à la fois.

Reste à sélectionner un panneau. C'est le rôle de la fonction selView() associée à l'évènement onclick pour chaque onglet.

function selView(n, litag) {
  var svgview = "none";
  var codeview = "none";
  switch(n) {
    case 1:
      svgview = "inline";
      break;
    case 2:
      codeview = "inline";
      break;
      // add how many cases you need
    default:
      break;
  }

  document.getElementById("svgpic").style.display = svgview;
  document.getElementById("source").style.display = codeview;
  var tabs = document.getElementById("tabs");
  var ca = Array.prototype.slice.call(tabs.querySelectorAll("li"));
  ca.map(function(elem) {
    elem.style.background="#F0F0F0";
    elem.style.borderBottom="1px solid gray"
  });

  litag.style.borderBottom = "1px solid white";
  litag.style.background = "white";
}

Le code assigne la valeur "none" à display par défaut, sauf pour l'onglet actif qui a la valeur "inline". De même pour les options de présentation, tous les onglets ont un fond gris et une bordure en bas, sauf l'onglet actif qui est blanc et relié au contenu.

Il faut aussi que le premier onglet soit activé au démarrage, ce qui se fait par l'appel de la fonction selInit():

function selInit() {
  var tabs = document.getElementById("tabs");
  var litag = tabs.querySelector("li");   // first li
  litag.style.borderBottom = "1px solid white";
  litag.style.background = "white";
}

Ce code fonctionne avec IE et tous les autres navigateurs récents.

Télécharger la démonstration avec le code JavaScript et CSS complet.