Discussion :

[alaninho]

Bonjour,

j'ai cherché sur le net des solutions pour mon problème mais j'ai rien qui correspond exactement à mon problème.

En faite, j'ai un menu avec des onglets comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="menu_central">
     <ul id="menu">
         <li class="menu0">
             <a id="_0" class="current" title="menu1" onclick="ongletActif(this.id)" href="/test_tuto/">home</a>
         </li>
         <li>
             <a id="_1" class="ghost" onclick="ongletActif(this.id)" href="/cgi-bin/test_tuto/form.py">web server</a>
         </li>
         <li>
             <a id="_2" class="ghost" onclick="ongletActif(this.id)" href="/cgi-bin/test_tuto/form.py">help</a>
         </li>
     </ul>
</div>

Et la fonction javascript suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ongletActif(eltId){
    arrLinkId = new Array('_0','_1', '_2');
    intNbLinkElt = new Number(arrLinkId.length);
    arrClassLink = new Array('current','ghost');
    strContent = new String()
    for (i=0; i<intNbLinkElt; i++) {
        strContent = "menu"+arrLinkId[i];
        if ( arrLinkId[i] == eltId ) {
            document.getElementById(arrLinkId[i]).className = arrClassLink[0];
        } else {
            document.getElementById(arrLinkId[i]).className = arrClassLink[1];
        }
    }
}

La fonction marche bien si je recharge la même page, et vu que je change de page, l'onglet qui est de base en ghost reste en ghost et n'est pas mis en évidence.

J'aimerai que ça fonctionne comme les onglets Basics, Option, ... du site suivant : http://demos.jquerymobile.com/1.0/docs/forms/search/

J'ai aucune solution en tête pour le faire, est ce que vous avez une idée ?

Si besoin de plus d'éléments demandez moi.

Merci,

Alaninho

[alaninho]

Je vais répondre à mon problème tout seul.

En faite, j'ai mis un id à chaque onglet dans le code html. Ici, _0, _1 et _2.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="menu_central">
     <ul id="menu">
         <li class="menu0">
             <a id="_0"  title="menu1" href="/test_tuto/">home</a>
         </li>
         <li>
             <a id="_1"  href="/cgi-bin/test_tuto/form.py">web server</a>
         </li>
         <li>
             <a id="_2" href="/cgi-bin/test_tuto/form.py">help</a>
         </li>
     </ul>
</div>

Et je lance la fonction javascript suivante au chargement de la page correspondant à l'onglet. Je change la class css de l'élément ayant l'id correspondant à l'onglet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
window.onload = function (){
        document.getElementById("_0").className = "onglet_current";
};

Dans la class css, je change juste la couleur. En espérant que ça aide des personnes.

Alaninho