Script pour PA

[Sakeb]

Bonjour à tous et je vous remercie d'avoir fait un tour su mon topic.
Je cherche de l'aide pour une PA en onglet. J'ai commencé à suivre le tuto d'un topic que j'avais trouvé sur ce forum et je suis arrivé à ceci : http://chapami.forums-actifs.net/ (c'est mon forum test).
Voici les codes :


CSS :

Code:

/*boite à  onglets*/
ul, li{
  list-style: none;/*evite les puces de liste dans les onglets*/
}
.mon_onglet{
  float: left;/*aligne les onglets sur une ligne horizontale*/
  padding: 2px 10px;/*marge intérieure autour du texte des onglets*/
  margin-right: 5px;/*marge extérieure droite des onglets*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond des onglets*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contours des onglets*/
  cursor: pointer;/* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}
.mon_onglet:hover{
  background: #b8efa1;/*couleur de fond de l'onglet survolé*/
}       
.mon_onglet_selected{
  float: left;/*aligne l onglet sélectionné sur la meme  ligne que les autres*/
  padding: 2px 10px;/*marge intérieure autour du texte de l onglet selectionné*/
  margin-right: 5px;/*marge extérieure droite de l onglet selectionné*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond de l onglets sélectionné*/
  border-top: 1px solid #ff0000;/* epaisseur style et couleur du bord haut de l onglet selectionné*/
  border-right: 1px solid #ff0000;/* epaisseur style et couleur du bord droit de l onglet selectionné*/
  border-left: 1px solid #ff0000;/* epaisseur style et couleur du bord gauche de l onglet selectionné*/
  border-bottom: 1px solid #ffffff; /* epaisseur style et couleur du bord inférieur de l onglet selectionné*/
  cursor: pointer; /* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}         
.clear{
  clear: both;/* cache le contenu quand on change d'onglet*/
}
.mon_contenu{
  color: #000;/* couleur du texte du contenu*/
  background: #ffffff;/couleur de fond du contenu*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contuours du contenu*/
  padding: 10px;/* marge intérieure autour du texte du contenu*/
        margin: -1px; /* reduction de la marge pour rapprocher les onglets du contenu*/       
}
#mes_contenus, #mes_onglets{
  width: 400px;/*largeur totale de la boite à onglet*/
}

PA :

Code:

<script src="http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>

J'ai beau essayer, je n'y arrive pas ...
J'aimerais que vous me codiez à partir de mon code la même PA que Naruto no Tenchi (laissez le contenue vide) pour que je puisse ensuite modifier à ma guise comme je le souhaite. Parce que j'ai de la misère à coder le début mais après, je me retrouve facilement. Merci d'avance

[Alex Fowl]

Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre : - doit-être explicite (qui explique brièvement le problème), - ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif

[Sakeb]

Je ne vois pas le problème O.o ?
J'ai mis PA (pour ma PA), demande de script à partir du mien ..

[Alex Fowl]

Bonsoir,

Pouvez-vous être plus explicite dans la fonction de votre code dans votre titre, afin de faciliter la fonction recherche ?

Cordialement,

[Sakeb]

Sa va là ?
Sinon Alex, t'es capable xD ?

[Alex Fowl]

Bonsoir,

Ce code :

Code:

<div class="gensmall">
 
    <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>

<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
cursor:pointer;
align:center;
width:20%;
border-left: #999999 5px solid;
border-bottom: #999999 1px solid;
border-right: #999999 5px solid;
border-top: #999999 1px solid;
}
.onglet_0
{
background:#FFF;
width:20%;
border-bottom:1px solid #999999;
}
.onglet_1
{
background:#999999;
width:20%;
border-left: #FFF 5px solid;
border-bottom: #FFF 1px solid;
border-right: #FFF 5px solid;
border-top: #FFF 1px solid;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#1d1d1d;
padding:5px;
display:none;
margin-top:3px;
width: 95%;
height:400px;
}
</style>

        <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"><center>--</center></span>
            <span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><center>--</center></span>

            <span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><center>--</center></span>
<span class="onglet_0 onglet" id="onglet_vote" onmouseover="javascript:change_onglet('vote');"><center>--</center></span>
        </div>
        <div class="contenu_onglets">
            <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi">
                <br><table border="0"><tbody><tr>A
            </tr></tbody></table>
           
            </div>
           
         <div style="display: none;" class="contenu_onglet" id="contenu_onglet_qui">
                <br><table border="0"><tbody><tr>B
            </tr></tbody></table>
            </div>
            <div style="display: none;" class="contenu_onglet" id="contenu_onglet_pourquoi">
                <br><table border="0"><tbody><tr>C
            </tr></tbody></table>
            </div>
        </div>
    </div><div style="display: none;" class="contenu_onglet" id="contenu_onglet_vote">
                <br><table border="0"><tbody><tr>D
            </tr></tbody></table>
            </div>
       
   
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
<br><br></div>

Cordialement,

[Sakeb]

Pour être sur, je le mets dans l'endroit CSS ?

[Sakeb]

J'ai compris c'est bon.
Merci