Rester sur l'onglet actif après avoir cliquer sur un bouton submit

**gasquy** · 12/10/2011, 22h18

Bonsoir.

J'espère être dans la bonne section, voilà ce que je cherche à faire.
J'ai plusieurs onglets et chacun contient des boutons, a ce jour, quand je clic sur le bouton de l'onglet 3, je reviens automatiquement sur l'onglet 1.
Y a t'il un moyen de rester sur l'onglet 3 ?

Je joins un bout de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<style type="text/css">
/* Div du module */
#menumodule {
    margin: 0;
    padding: 0;
    width: 30%;
}
/* Menu */
#menumanager {
    height: 35px;
    margin: 0;
    padding: 0;
    width: 100%;
}
#menumanager li {
    margin: 0 0 -2px 0;
    list-style: none;
    padding: 0 0 0 2px;
    float: left;
}
#menumanager li a {
    padding: 10px 5px 5px 4px;
    float: left;
}
#menumanager li a:hover {
    border-right: 1px solid #DFD5C3;
    border-left: 1px solid #DFD5C3;
    border-top: 1px solid #DFD5C3;
    background-color: #FFFFF0;
    color: #000000;
}
/* Affichage du menu */
#menumodule .content {
	margin: 0;
	clear: left;
}
#menumodule a.current {
    background-color: #FFFFF0;
    border-left: 1px solid #DFD5C3;
    border-right: 1px solid #DFD5C3;
    border-top: 1px solid #DFD5C3;
}
#menumodule a.ghost  {
	background-color: #E2EBEE;
	border-left: 1px solid #DFD5C3;
    border-right: 1px solid #DFD5C3;
    border-top: 1px solid #DFD5C3;
	margin: 1px 0 0;
    padding: 8px 5px 5px 4px;
}
#menumodule .on {
	display: block;
}
#menumodule .off {
	display: none;
}
 
</style>
<script type="text/javascript">
<!-- Gestion des onglets du menu -->
function multiClass(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];
			document.getElementById(strContent).className = "on content";
		}
		else
		{
			document.getElementById(arrLinkId[i]).className = arrClassLink[1];
			document.getElementById(strContent).className = "off content";
		}
	}	
}
</script>
<div id="menumodule">
  <ul id="menumanager">
    <li><a id="_0" class="current" onclick="multiClass(this.id)" href="#" >R1</a></li>
    <li><a id="_1" class="ghost" onclick="multiClass(this.id)" href="#" >R2</a></li>
    <li><a id="_2" class="ghost" onclick="multiClass(this.id)" href="#" >R3</a></li>
  </ul>
  <div id="menu_0" class="on content">
    <form method="post">
      <fieldset>
        <div>
          <input name="WPsubmitRefresh" value="R1" class="button" type="submit">
        </div>
      </fieldset>
    </form>
  </div>
  <div id="menu_1" class="off content">
    <form method="post">
      <fieldset>
        <div>
          <input name="OPsubmitRefresh" value="R2" class="button" type="submit">
        </div>
      </fieldset>
    </form>
  </div>
  <div id="menu_2" class="off content">
    <form method="post">
      <fieldset>
        <div>
          <input name="submitRefresh" value="R3" class="button" type="submit">
        </div>
      </fieldset>
    </form>
  </div>
</div>
</body>
</html>

Merci d'avance de votre aide.

**andry.aime** · 13/10/2011, 05h44

Bonjour,

1- Tu le fait coté serveur en testant le bouton submit cliqué pour la class des div.
2- Tu utilises Ajax pour envoyer tes formulaires comme ça la page ne se recharge pas.

A+.

**gasquy** · 13/10/2011, 07h39

Super merci, je vais essayer avec cette solution.

Avec ajax, peut on aussi quand je valide le bouton de l'onglet 1, passer automatiquement que l'onglet 2 (+1) idem quand je clic bouton onglet 2, passer onglet 3 etc ....

Merci et bon dev

**andry.aime** · 13/10/2011, 08h56

Oui, tu n'as qu'à manipuler les class des div une fois la requête AJAX s'est effectuée avec succès.

A+.

Rester sur l'onglet actif après avoir cliquer sur un bouton submit

JavaScript

Discussions similaires

Partager

Partager