Onglet 1 par défaut

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglet 1 par défaut

Message par Ayael le Dim 19 Fév 2012 - 21:57

Bonjour bonjour, j'ai suivit un tutoriel pour faire des onglets sauf que je les ai un peu trifouiller, j'aimerai que le premier onglet soit l'onglet "quoi" s'affiche par défaut (En gros qu'il soit afficher tout le temps sauf quand on passe la souris sur l'onglet "qui" et l'onglet "pourquoi". Mon soucis c'est qu'actuellement si on passe la souris sur l'un des deux onglets (qui ou pourquoi) il reste afficher sur le qui ou le pourquoi, alors que je voudrais qu'il repasse sur l'onglet "quoi". Je ne sais pas si je suis très clair^^"

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Un système d'onglet en javascript</title>
    <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;
                cursor:pointer;
        }
        .onglet_0
        {
               


        }
        .onglet_1 /*onglet actif*/
        {
             


        }
        .contenu_onglet
        {
              width:275px;
height:133px;
 background-color:#dddddd;
                border:1px solid black;
                margin-top:0px;
                padding:5px;
                display:none;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
        </style>
</head>
<body>
       
<table><tr><td valign="top"><div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/vainqu11.png"/></span>

<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">  </span></td><td valign="top">
           



        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_quoi">
                <h1>Quoi?</h1>
                Un simple système d'onglet utilisant les technologies:<br />
                <ul>
                    <li>(X)html</li>
                    <li>CSS</li>
                    <li>Javascript</li>
                </ul>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_qui">
                <h1>Qui?</h1>
                C'est un script réalisé par Ybouane,<br />
                Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_pourquoi">
                <h1>Pourquoi?</h1>
                Pour simplifier la navigation et la diviser en parties
            </div>
        </div>
    </div></td><td valign="top"><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/meille11.png"/></span>
        </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script></td></tr></table>
</body>
</html>



Dernière édition par Ayael le Lun 20 Fév 2012 - 12:04, édité 1 fois

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet 1 par défaut

Message par Invité le Lun 20 Fév 2012 - 5:13

Bonjours,

quelle est le lien de votre forum que je puisse mieux comprendre votre problème ?

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet 1 par défaut

Message par demeter1 le Lun 20 Fév 2012 - 10:54

Bonjour Ayael, voici le code corrigé

Code:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Un système d'onglet en javascript</title>
            <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;
                        cursor:pointer;
                }
                .onglet_0
                {
                     
       
       
                }
                .onglet_1 /*onglet actif*/
                {
                   
       
       
                }
                .contenu_onglet
                {
                      width:275px;
        height:133px;
        background-color:#dddddd;
                        border:1px solid black;
                        margin-top:0px;
                        padding:5px;
                        display:none;
                }
                ul
                {
                        margin-top:0px;
                        margin-bottom:0px;
                        margin-left:-10px
                }
                h1
                {
                        margin:0px;
                        padding:0px;
                }
                </style>
        </head>
        <body>
             
        <table><tr><td valign="top"><div class="systeme_onglets">
                <div class="onglets">
                    <span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/vainqu11.png"/></span>
       
        <span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">  </span></td><td valign="top">
                 
       
       
       
                <div class="contenu_onglets">
                    <div class="contenu_onglet" id="contenu_onglet_quoi">
                        <h1>Quoi?</h1>
                        Un simple système d'onglet utilisant les technologies:<br />
                        <ul>
                            <li>(X)html</li>
                            <li>CSS</li>
                            <li>Javascript</li>
                        </ul>
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_qui">
                        <h1>Qui?</h1>
                        C'est un script réalisé par Ybouane,<br />
                        Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
                    </div>
                    <div class="contenu_onglet" id="contenu_onglet_pourquoi">
                        <h1>Pourquoi?</h1>
                        Pour simplifier la navigation et la diviser en parties
                    </div>
                </div>
            </div></td><td valign="top"><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/meille11.png"/></span>
                </div>
            <script type="text/javascript">
                //<!--
                        var anc_onglet = 'quoi';
                        change_onglet(anc_onglet);
                //-->
                </script></td></tr></table>
        </body>
        </html>

Rien de bien méchant, il fallait juste réattribuer la class danc cette partie
Code:
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">  </span></td><td valign="top">

pour
Code:
<span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">  </span></td><td valign="top">

le span class attribue l'onglet par défaut qui apparait en premier.

demeter1
+ Hyperactif +

Masculin
Messages : 8224
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet 1 par défaut

Message par Invité le Lun 20 Fév 2012 - 10:57

Ha okay... Je voulais le lien car je ne comprenais pas ce que vous vouliez.. Mais bon heureux pour vous que votre problème sois réglé (j'Imagine) avec cela Wink !



Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet 1 par défaut

Message par Ayael le Lun 20 Fév 2012 - 12:03

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Un système d'onglet en javascript</title>
    <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;
                cursor:pointer;
        }
        .onglet_0
        {
           


        }
        .onglet_1 /*onglet actif*/
        {
         


        }
        .contenu_onglet
        {
              width:275px;
height:133px;
 background-color:#dddddd;
                border:1px solid black;
                margin-top:0px;
                padding:5px;
                display:none;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
        </style>
</head>
<body>
   
<table><tr><td valign="top"><div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_qui" onmouseout="javascript:change_onglet('quoi');" onmouseover="javascript:change_onglet('qui');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/vainqu11.png"/></span>

<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">  </span></td><td valign="top">
       



        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_quoi">
                <h1>Quoi?</h1>
                Un simple système d'onglet utilisant les technologies:<br />
                <ul>
                    <li>(X)html</li>
                    <li>CSS</li>
                    <li>Javascript</li>
                </ul>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_qui">
                <h1>Qui?</h1>
                C'est un script réalisé par Ybouane,<br />
                Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_pourquoi">
                <h1>Pourquoi?</h1>
                Pour simplifier la navigation et la diviser en parties
            </div>
        </div>
    </div></td><td valign="top"><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseout="javascript:change_onglet('quoi');" onmouseover="javascript:change_onglet('pourquoi');"><img src="http://i46.servimg.com/u/f46/16/36/06/79/meille11.png"/></span>
        </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script></td></tr></table>
</body>
</html>

Ce code là marche ^^ Merci de m'avoir montrer la voix!

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum