Onglet 1 par défaut

2 participants

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

Résolu Onglet 1 par défaut

Message par Ayael 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

Ayael
*****

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

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet 1 par défaut

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

Bonjours,

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

Invité
Invité


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

Résolu Re: Onglet 1 par défaut

Message par demeter1 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

demeter1
Membre actif

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

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

Résolu Re: Onglet 1 par défaut

Message par Invité 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 !


Anonymous

Invité
Invité


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

Résolu Re: Onglet 1 par défaut

Message par Ayael 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

Ayael
*****

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

http://valsedupouvoir.forumactif.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

- Sujets similaires

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