<div class="roleplaySheet">
  <span class="tab active" id="tab1">ONGLET 1</span>
  <span class="tab" id="tab2">ONGLET 2</span>
  <div class="contentBox">
    <div id="content_tab1">Le contenu de mon premier onglet.</div>
    <div id="content_tab2">Le contenu de mon deuxième onglet.</div>
  </div>
</div>

<div class="roleplaySheet"><span class="tab active" id="tab1">ONGLET 1</span><span class="tab" id="tab2">ONGLET 2</span>
<div class="contentBox"><div id="content_tab1">Le contenu de mon premier onglet.</div><div id="content_tab2">Le contenu de mon deuxième onglet.</div></div></div>

<div class="roleplaySheet"><!--
  --><span class="tab active" id="tab1">ONGLET 1</span><!--
  --><span class="tab" id="tab2">ONGLET 2</span><!--
  --><div class="contentBox"><!--
    --><div id="content_tab1">Le contenu de mon premier onglet.</div><!--
    --><div id="content_tab2">Le contenu de mon deuxième onglet.</div><!--
  --></div><!--
--></div>

/* FICHE */
.roleplaySheet {
  width:250px; /* largeur de la fiche */
  text-align:center; /* centre les onglets */
}
/* ONGLETS */
.tab {
  display:inline-block;
  width:100px; /* largeur */
  height:20px; /* hauteur */
  background-color:#ffffff; /* couleur de fond */
  border-top:2px #000000 solid; /* bordure haut */
  border-left:2px #000000 solid; /* bordure gauche */
  border-right:2px #000000 solid; /* bordure droite */
  cursor:pointer; /* change la souris au survol */
  margin:0 5px; /* haut-bas droite-gauche ; espace entre les onglets */
  padding:3px 0 0; /* haut droite-gauche bas ; replace le texte au centre de l'onglet */
}
.tab.active {
  /* propriétés de l'onglet actif */
  background-color:#cccccc; /* couleur de fond */
}
/* CONTENU */
.contentBox {
  height:150px; /* hauteur */
  padding:5px; /* espace entre le texte et le bord */
  background-color:#ffffff; /* couleur de fond */
  border:2px #000000 solid; /* bordure */
  text-align:left; /* aligne le texte à gauche */
}
.contentBox > div {
  height:100%; /* nécessaire pour overflow ; dit aux contenus d'adopter la hauteur de leur contenant (contentBox) */
  overflow:auto; /* si le contenu dépasse la taille de la zone, il y a une barre défilante */
}
#content_tab2 {
  display:none; /* masque le contenu de l'onglet 2 */
}

$(function(){
  $('.tab').click(function(){ //quand je clique sur un onglet, les actions suivantes se déclenchent
      $('.active').removeClass('active'); //l'onglet actif change: on enlève la class de l'ancien onglet
      $('.contentBox > div').hide(); //tous les contenus sont masqués
      var tab = $(this).attr('id'); //je récupère l'id de l'onglet pour pouvoir cibler le contenu correspondant
      $('#content_' + tab).fadeIn(); //le contenu qui correspond à l'onglet s'affiche
      $(this).addClass('active'); //on ajoute la class "active" à l'onglet actif, soit celui qu'on vient de cliquer
  });
});