<title>Conception d'onglet</title><script src="http://illiweb.com/fa/js_16/fr.js" type="text/javascript"></script><style>
/* Début de la feuille de style */
.onglet-content > div {
display : none ; /* permet de spécifier la manière dont un élément est affiché */
border : solid 0px; /* Bordure de la page d’accueil*/
padding : 2px ; /* correspond à la marge interne d'une boite, et permet de définir la distance */
margin-bottom : 0px ; /*correspond à la marge externe d'une boite, et permet de définir la distance */
background: #FFFAE6; /* fond de la Page d'accueil */
}
.onglet-content > div.active{ display : block ; }
.onglet-table { border-spacing : 2px ; margin-left:auto ; margin-right :auto ; }
.onglet-table td {
style : top ;
vertical-align:middle ; /* permet de gérer l'alignement vertical du texte */
border : solid Xpx ; /* Bordure de la page d’accueil */
border-radius : 0 ; -moz-border-radius : 0 ; -webkit-border-radius : 0 ; /* l'arrondi de l'encadrement, a retiré selon ce que tu veux */
padding : 2px; /* taille en largeur des onglets */
width: 3px; /* taille en hauteur des onglets */
text-align:center; /* permet de centré le nom des onglets */
opacity : 0.7 ; /* (entre 0,1 et 1) opacité de tes onglets inactifs (que tu n'as pas sélectionné ou que tu ne survole pas) */
font-size: 11px; /* taille des titres de tes onglets */
background: #FFFAE6; /* fond de tes onglets */
}
.onglet-table td.active, .onglet-table td:hover {
opacity : 1 ; /* (entre 0,1 et 1) opacité d'un onglet survolé ou que tu as sélectionné */
}
/* Fin de la feuille de style */
</style>
<center>
<script type="text/javascript">
/* Début du script */
jQuery(document).ready(function(){
jQuery(".onglet-table").find("td").click(function(){
/* Suppression des classe .active pour tout les onglets et contenus */
var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
system.find(".onglet-table").find(".active").removeClass("active");
system.find(".onglet-content").find(".active").removeClass("active");
/* Ajout de la classe active à l'onglet cliqué et au contenu correspondant */
var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */
jQuery(this).addClass("active");
system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
});
});
/*Fin du script */
</script>
<!-- Début du HTML -->
<div class="onglet">
<table>
<tbody>
<tr>
<td colspan="2">
<table class="onglet-table">
<tbody>
<tr>
<td class="active" name="1">
<img alt="" src="http://25.media.tumblr.com/847c562be4648952576f17b33d74497b/tumblr_mxmhw5Ggyo1qg94hko3_250.gif" style="height: 40px;" />
</td>
<td name="2">
<img alt="" src="http://i.imgur.com/WBABWPJ.gif" style="height: 40px;" />
</td>
<td name="3">
<img alt="" src="http://i.imgur.com/nplDQba.gif" style="height: 40px;" />
</td>
<td name="4">
<img alt="" src="http://i.imgur.com/DXbspjT.gif" style="height: 40px;" />
</td>
<td name="5">
<img alt="" src="http://media.tumblr.com/tumblr_m726mlKZxG1rt3hhs.gif" style="height: 40px; width: 40px;" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="onglet-content">
<div class="active" name="1">
<div style="BORDER: # 1px solid; background-color:#FFFAE6; padding:0px; font-family: arial; line-height: 11px;text-align: center;">
<b1>cecilia wraysford</b1><br />.crumble, <strong>administratrice</strong><br /><a href="http://dontblink.forumactif.org/u2">profil</a> ∞ <a href="http://dontblink.forumactif.org/privmsg?mode=post&u=2">mp</a>
</div>
</div>
<div name="2">
<div style="BORDER: # 1px solid; background-color:#FFFAE6; padding:0px; font-family: arial; line-height: 11px;text-align: center;">
<b1>nora powell</b1><br />Ruzzle, <strong>administratrice</strong><br /><a href="http://dontblink.forumactif.org/u3">profil</a> ∞ <a href="http://dontblink.forumactif.org/privmsg?mode=post&u=3">mp</a>
</div>
</div>
<div name="3">
<div style="BORDER: # 1px solid; background-color:#FFFAE6; padding:0px; font-family: arial; line-height: 11px;text-align: center;">
<b1>fauve delaney</b1><br />sian, <strong>administratrice</strong><br /><a href="http://dontblink.forumactif.org/u4">profil</a> ∞ <a href="http://dontblink.forumactif.org/privmsg?mode=post&u=4">mp</a>
</div>
</div>
<div name="4">
<div style="BORDER: # 1px solid; background-color:#FFFAE6; padding:0px; font-family: arial; line-height: 11px;text-align: center;">
<b1>oswin rosendale</b1><br />frozen lights, <strong>administratrice</strong><br /><a href="http://dontblink.forumactif.org/u5">profil</a> ∞ <a href="http://dontblink.forumactif.org/privmsg?mode=post&u=5">mp</a>
</div>
</div>
<div name="5">
<div style="BORDER: # 1px solid; background-color:#FFFAE6; padding:0px; font-family: arial; line-height: 11px;text-align: center;">
<b1>lisana nemesis</b1><br />Nightwing, <strong>administratrice</strong><br /><a href="http://dontblink.forumactif.org/u6">profil</a> ∞ <a href="http://dontblink.forumactif.org/privmsg?mode=post&u=6">mp</a>
</div>
</div>
</div>
Accueil 
