Discussion :

[BnA]

Bonjour à tous!

Tout d'abord, je ne savais pas trop où poster mon message... J'ai hésité entre CSS, HTML et JavaScript, et au final il m'a paru plus logique de poster mon problème ici, mais bon, bref, osef...

MON PROBLEME!!

(ou plutôt, ma question)


J'ai une jolie page, qui switche entre différentes DIV avec du Javascipt, et qui affiche, selon la DIV active, un contenu ou l'autre (sans recharger la page).

Bon, voici le code HTML, CSS et Javascript (absolument pas optimisé), je continuerai mon explication par après.


HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="tarifs">
  <div id="onglets">
    <div id="ongPart"><a href="javascript:switchPart();"> Tarifs particuliers</a></div>
    <div id="ongCorp"><a href="javascript:switchCorp();"> Tarifs Entreprises</a></div>
    <div id="ongInst"><a href="javascript:switchInst();"> Tarifs Education</a></div>
  </div>
  <div id="part"> 1 </div>
  <div id="corp"> 2 </div>
  <div id="inst"> 3 </div>
</div>

CSS

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
 
#part{
display:block;
width:570px;
border:2px solid #b8cad6;
background-color:white;
padding-top:7px;
}
 
#corp{
display:none;
width:570px;
border:2px solid #b8cad6;
background-color:white;
padding-top:7px;
}
 
#inst{
display:none;
width:570px;
border:2px solid #b8cad6;
background-color:white;
padding-top:7px;
}
 
#onglets{
width:570px;
position:relative;
height:32px;
text-align:center;
vertical-align:middle;
}
 
#ongPart{
width:188px;
position:absolute;
left:0;
height:32px;
border:2px solid #b8cad6;
border-bottom:none;
background-color:white;
 
}
 
#onglets a{
line-height:30px;
}
 
#ongCorp{
width:188px;
position:absolute;
left:190px;
right:190px;
height:30px;
border:2px solid #b8cad6;
border-bottom:none;
background-color:#dae2e9;
}
 
#ongInst{
width:190px;
position:absolute;
right:-4px;
height:30px;
border:2px solid #b8cad6;
border-bottom:none;
background-color:#dae2e9;
}
 
 
#tarifs{
width:570px;
}

JavaScript

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
 
function switchPart() {
 if (
 document.getElementById("part").style.display == "block") {
 }
 else {
 document.getElementById("inst").style.display = "none";
 document.getElementById("corp").style.display = "none";
 document.getElementById("part").style.display = "block";
 document.getElementById("ongPart").style.height = "32px";
 document.getElementById("ongCorp").style.height = "30px";
 document.getElementById("ongInst").style.height = "30px";
 document.getElementById("ongPart").style.backgroundColor = "white";
 document.getElementById("ongCorp").style.backgroundColor = "#dae2e9";
 document.getElementById("ongInst").style.backgroundColor = "#dae2e9";
 }
}
 
function switchCorp() {
 if (
 document.getElementById("corp").style.display == "block") {
 }
 else {
 document.getElementById("inst").style.display = "none";
 document.getElementById("corp").style.display = "block";
 document.getElementById("part").style.display = "none";
 document.getElementById("ongPart").style.height = "30px";
 document.getElementById("ongCorp").style.height = "32px";
 document.getElementById("ongInst").style.height = "30px";
 document.getElementById("ongPart").style.backgroundColor = "#dae2e9";
 document.getElementById("ongCorp").style.backgroundColor = "white";
 document.getElementById("ongInst").style.backgroundColor = "#dae2e9";
 }
}
 
function switchInst() {
 
 if (
 document.getElementById("inst").style.display == "block") {
 }
 else {
 document.getElementById("inst").style.display = "block";
 document.getElementById("corp").style.display = "none";
 document.getElementById("part").style.display = "none";
 document.getElementById("ongPart").style.height = "30px";
 document.getElementById("ongCorp").style.height = "30px";
 document.getElementById("ongInst").style.height = "32px";
 document.getElementById("ongPart").style.backgroundColor = "#dae2e9";
 document.getElementById("ongCorp").style.backgroundColor = "#dae2e9";
 document.getElementById("ongInst").style.backgroundColor = "white";
 }
}

Bon, voilà.

Le JavaScript n'est donc absolument pas optimisé, mais il fonctionne, c'est le principal.

Donc...

Ma question...

Comme vous pouvez le voir, j'ai donc 3 onglets (Particuliers, Entreprises, Education). Par défaut, lorsqu'on arrive sur cette page, c'est l'onglet "Particuliers" qui est actif.

La page où apparait ce... appelons-le "multifolio", cette page donc, ne sert qu'à informer les visiteurs des différents tarifs disponibles.

Les services associés aux tarifs sont expliqués sur d'autres pages. Et c'est ici qu'est le coeur de ma question...

J'aimerais, lorsque l'utilisateur clique sur "voir nos tarifs" et qu'il est, par exemple, sur la page "Entreprises", que lorsqu'il sera redirigé sur la page "tarifs", l'onglet "Entreprises" soit l'onglet actif.

Seulement, vous vous en doutez, comment faire? (Sinon je ne serais pas là...)

Bref, si quelqu'un à une piste/idée/suggestion, je suis preneur (mais soyez indulgent, je suis une quiche en Javascript...)



Merci d'avance!

[E.Bzz]

Bonjour,

Code :

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

1
2
3
4
5
6
7
var strChoixFait = "part";
function switchInst() {
  if (
 document.getElementById("inst").style.display == "block") {
   strChoixFait = "inst";
 }
...

avec

Code :

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

<input type="button" value="Tarifs" onclick="self.location.href='page_tarif.php?choix='+strChoixFait;">

A+

[BnA]

Ok, mais comme je l'ai dit, je suis une quiche en Javascript...

Et je ne vois pas du tout ce qui se passe...

Je dois peut-être remplacer le "+strChoixFait" de l'input par, par exemple, INST, ou CORP??

[E.Bzz]

Code :

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

1
2
3
4
5
6
7
var strChoixFait = "part";
function switchInst() {
  if (
 document.getElementById("inst").style.display == "block") {
   strChoixFait = "inst";
 }
...

avec

Code :

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

<input type="button" value="Tarifs" onclick="self.location.href='page_tarif.php?choix='+strChoixFait;">

1) tu déclares la variable en global (en dehors d'une fonction) et tu l'alimentes "en dur" avec ton choix par défaut
2) tu l'alimentes à l'aide de tes fonctions (ici pour "inst")
3) tu la passes dans l'url pour envoyer le choix fait, afin que le serveur puisse renvoyer la page correspondante

A+

[BnA]

Ok ok, je vois!

Et ça marche, merci!