Discussion :

[bouchra19]

Bonjour tout le monde,

j'ai un menu en html que j'ai copié:

Code :

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

1
2
3
4
5
6
7
8
<ul class="glossymenu bleu">
    <li class="current"><a href="accueil.aspx"><b>Accueil</b></a></li>
    <li><a href="#"><b>Produits</b></a></li>
    <li><a href="accessoire.aspx"><b>Acheter un produit</b></a></li>
    <li><a href="#"><b>News</b></a></li>    
    <li><a href="#"><b>L'entreprise</b></a></li>    
    <li><a href="#"><b>Contact</b></a></li>
</ul>

et son code 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
.glossymenu{
position: relative;
padding: 0 37px 0 36px;
margin: 0 auto 0 auto;
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}
.bleu{
background: url(images/bleu1.gif) repeat-x;
}
.bleu li.current a, .bleu li a:hover{
background: url(images/bleu2.gif) no-repeat;
}
.bleu li.current a b, .bleu li a:hover b{
background: url(images/bleu3.gif) no-repeat right top;
}

mon problème est que le style "current" s'applique toujours à la page "accueil.aspx" même si je change de page

qu'est ce que je dois faire pour résoudre ce problème svp?

[ibrakola]

Bonsoir bouchra19,
j'ai pas compris ta question, car vue

Code :

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

1
2
 
<li class="current"><a href="accueil.aspx"><b>Accueil</b></a></li>

c'est normal que ton style "current" s'applique toujour a la page accueil.

[bouchra19]

oui je sais, mais je ne sais pas comment le changer
je pence que ça se fait en javascript mais je ne sais pas comment

[mcoutant]

Je pense que la réponse que tu attend est tout simplement:

Si tu es sur la page d'accueil,

Code html :

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

1
2
3
4
5
6
7
8
9
 
<ul class="glossymenu bleu">
    <li class="current"><a href="accueil.aspx"><b>Accueil</b></a></li>
    <li><a href="#"><b>Produits</b></a></li>
    <li><a href="accessoire.aspx"><b>Acheter un produit</b></a></li>
    <li><a href="#"><b>News</b></a></li>    
    <li><a href="#"><b>L'entreprise</b></a></li>    
    <li><a href="#"><b>Contact</b></a></li>
</ul>

Si tu es sur la page produit,

Code html :

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

1
2
3
4
5
6
7
8
9
 
<ul class="glossymenu bleu">
    <li><a href=""><b>Accueil</b></a></li>
    <li class="current"><a href=""><b>Produits</b></a></li>
    <li><a href="accessoire.aspx"><b>Acheter un produit</b></a></li>
    <li><a href="#"><b>News</b></a></li>    
    <li><a href="#"><b>L'entreprise</b></a></li>    
    <li><a href="#"><b>Contact</b></a></li>
</ul>

[bouchra19]

oui c'est exactement ce que je veux

le problème c'est que le menu se trouve dans une page master (qui s'applique à toutes les pages)

[mcoutant]

Si je ne dis pas de bêtise, tu dois avoir en JS un window.location (ou dans ce style) qui peut te retourner la page ou tu te trouve.
Ensuite tu fais tes conditions et en fonctions de tes conditions tu rajoute le classe à ton li.

Pour rajouter une classe en jQuery -> addClass