Affichage différent selon URL de provenance
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:
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:
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:
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!
;)
