$(function(){
              var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
            "tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
            });

/*Onglet*/

            /* .systab .tab => les onglet */
            .systab .tab {
              padding: 2px 10px;
              margin-right: 5px;
              color: #FFC7C1;
              background: #FFC7C1;
              border: 1px solid #FFC7C1;
              cursor: pointer;
            }
            /* .systab .tab:hover => les onglets survolés */
            .systab .tab:hover {
              background: #b8efa1;
              color: #487f31;
              border-color: #487f31;
            }
            /* .systab .tab.selected => les onglets sélectionnés */
            .systab .tab.selected{
              color: #FFC7C1;
              background: #FFC7C1;
            }
            /* .systab .contents => les conteneurs des contenus associés aux onglets  */
            .systab .contents {
              margin-top: 1px;
              margin-bottom: 1px;
              color: #FFC7C1;
              background: #FFC7C1;
              border: 1px solid #FFC7C1;
              padding: 10px;
            }
            /* style des onglets si ils sont à gauche ou à droite */
            .systab.s_float .tab,.systab.s_float .tab {
              display: block;
              margin: 5px;
            }
            /* flottement des conteneurs si les onglets sont à gauche où à droite */
            .systab.s_float .tabs,.systab.s_float .contents {
              float: left;
            }

        .montab1 .tab {
          border-radius: 10px;
        }
        .montab1 .contents {
          width:  10%;
          margin-right: 30px;
          border: 1px dashed blue;
          background: #eef;
        }
        .montab2 .contents {
          width:  40%;
          border: none;
          background: #efe;
          box-shadow:0 0 10px #aba;
          border-radius: 20px;
        }
        .montab2 .tab.selected {
          color: red;
          background: blue;
        }
        .montab1 .mononglet4 {
          color: blue;
        }
        .montab1 .mononglet7 {
          color: orange;
        }

        <div class="systab s_float montab1">
          <div>
            <span class="mononglet1">1, 2, 3</span>
            Je m'en vais aux bois
          </div>
          <div>
            <span class="mononglet4">4, 5, 6</span>
            Cueillir des cerises
          </div>
          <div>
            <span class="mononglet7">7, 8, 9</span>
            Dans mon panier neuf
          </div>
        </div>
        <div class="systab s_float s_bottom montab2">
          <div>
            <span class="mononglet10">10, 11, 12</span>
            Elles seront toutes rouges
          </div>
        </div>
        <div style="clear:left"></div>