Code:

<style type="text/css"></style>

A l'intérieur on y mettra tout nos styles CSS pour éviter d'avoir des div trop longue, donc beaucoup trop chiant à modifier. Et puis c'est surtout plus pratique.

Ensuite on va y créer plusieurs class, dans ce tutoriel, on va les nommés simplement pour plus de visibilité, donc vu que l'on a 3 onglets, nous aurons une classe .onglet1, .onglet2, .onglet3 en display: inline-block
Ces trois class serviront à l'apparence des onglets.
Et parce que on aime avoir une animation quand on passe sa souris sur un des onglets, on va mettre un hover, donc on aura : .onglet1:hover, .onglet2:hover, .onglet3:hover . Ce qui nous donne :

Code:

<style type="text/css">.onglet1, .onglet2, .onglet3 { display: inline-block; CSS HERE } .onglet1:hover, .onglet2:hover, .onglet3:hover { CSS HERE }</style>

Néanmoins, si vous souhaitez avoir des onglets avec du texte et non pas avec des images (dans le cas contraire sauter cette étape), vous devez rajouter : .onglet1 a, .onglet2 a, .onglet3 a en display: block et leur équivalent en hover, soit .onglet1 a:hover, .onglet2 a:hover, .onglet3 a:hover . Et on obtient donc :

Code:

<style type="text/css">.onglet1, .onglet2, .onglet3 { display: inline-block; CSS HERE } .onglet1:hover, .onglet2:hover, .onglet3:hover { CSS HERE } .onglet1 a, .onglet2 a, .onglet3 a { display: block; CSS HERE } .onglet1 a:hover, .onglet2 a:hover, .onglet3 a:hover { CSS HERE }</style>

Well done. À présent on va créer notre boîte, celle qui contiendra tout le contenu des onglets. On va les nommés #box. Donc on aura #box1 qui sera à part et affiché par défaut par : display: block et #box2 avec #box3 qui seront en display:none , ce qui veut dire qu'ils ne seront pas affichés par défaut. Grosso modo vous obtiendrez quelques choses du genre :

Code:

<style type="text/css">.onglet1, .onglet2, .onglet3 { display: inline-block; CSS HERE } .onglet1:hover, .onglet2:hover, .onglet3:hover { CSS HERE } .onglet1 a, .onglet2 a, .onglet3 a { display: block; CSS HERE } .onglet1 a:hover, .onglet2 a:hover, .onglet3 a:hover { CSS HERE } #box1 { display: block; CSS HERE } #box2, #box3 { display: none; }</style>

Il est inutile de modifier #box2 et #box3, mais pour #box1, il s'agit tout simplement de la mise en forme de la boîte, à vous de lui mettre une couleur, une ombre, etc...
Maintenant, on va emboîter les div les unes dans les autres, on va aussi utiliser la propriété " target ", qui nous permet de mettre un style à notre " cible " qui est ici nos blocs qu'affichent les onglets. On aura donc quelques choses comme sa :

Code:

<style type="text/css">.onglet1, .onglet2, .onglet3 { display: inline-block; CSS HERE } .onglet1:hover, .onglet2:hover, .onglet3:hover { CSS HERE } .onglet1 a, .onglet2 a, .onglet3 a { display: block; CSS HERE } .onglet1 a:hover, .onglet2 a:hover, .onglet3 a:hover { CSS HERE } #box1 { display: block; CSS HERE } #box2, #box3 { display: none; } #page1:target #box1 { display: block; CSS HERE } #page2:target #box2 { display: block; CSS HERE } #page3:target #box3 { display: block; CSS HERE }</style>

Et au final vous n'avez qu'a mettre en place le html ! Comme ceci :

Code:

<div id="page1"><div id="page2"><div id="page3">
<span class="onglet1"><a href="#page1">Général</a></span><span class="onglet2"><a href="#page2">Descriptions</a></span><span class="onglet3"><a href="#page3">Histoire</a></span>

<div id="box1"><div id="box2">Contenu de la boîte n°2</div><div id="box3">Contenu de la boîte n°3</div> Contenu de la boîte n°1</div>
</div></div></div>

Bien évidemment, c'est à vous de modifier le code pour le personnaliser. Chose à savoir, il est conseilelr de mettre votre #box1 avec une hauteur (height) identique à celle de #page1:target #box1, #page2:target #box2 et #page3:target #box3 . Sinon vous aurez quelques problèmes. Now, vous savez comment faire des onglets sans Javascript \o/ .