Comment attribuer une couleur à un lien suite à un clic ?

**info007** · 12/01/2009, 12h12

Bonjour,

j'ai un petit problème en css :voici mon petit code qui fonctionne normalement sauf qu'en remplacent <a:href="#">lien1</a> par <a:href="http://localhost:8080:localhost/monsite/mapage">lien1</a>(pour charger la page consernée),
les propriétés de style ne sont plus applicable.En faite ce que veux obtenir c'est en cliquant sur un lien du menu,ce lien doit avoir un font vert jusqu'à le clic sur un nouveau lien.
mon 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
 
<style type="text/css">
ul#menu { 
width: 100%; 
height: 43px;
background: #FFF url("images/menu-bg.png") top left repeat-x; 
 font-size: 0.8em; 
 font-family: "Lucida Grande", Verdana, sans-serif; 
 font-weight: bold; 
 list-style-type: none; 
 margin: 0;
 padding: 0; }
ul#menu li { 
display: block; 
float: right;  
margin: 0 0 0 5px;
border-left:1px solid;
border-top:1px solid;
border-right:1px solid;
 }
ul#menu li a { 
height: 43px;
 color: #777;
  text-decoration: none; 
  display: block; 
  float: left; 
  line-height: 200%; 
  padding: 8px 15px 0; 
  }
  ul#menu li a:link {
background: #FFF url("images/current-bg.png") top left repeat-x;
 color: #000;
 font-weight:bolder;
  }
ul#menu li a:hover {
background: #FFF url("images/current-bg.png") top left repeat-x;
 color: #000;
 font-weight:bolder;
  }
ul#menu li a:focus {
background: #FFF url("images/current-bg.png") top left repeat-x;
 color: #000;
 font-weight:bolder;
  }  
 
ul#menu li a:active{ 
color: #000; 
background: #FFF url("images/current-bg.png") top left repeat-x;
 padding: 5px 15px 0; }
 
</style>
 
</head>
 
<body>
 
<ul id="menu">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Products</a></li>
<li><a href="#" title="">Contact</a></li>
<li><a href="#" title="">Label 4</a></li>
<li><a href="#" title="">Label 5</a></li>
</ul>
 
 
</body>
</html>

Je vous remercie d'avance pour votre aide

**Bovino** · 12/01/2009, 12h18

La pseudo-classe :active ne concerne que les éléments sur lesquels tu es en train de cliquer...
Pour faire ce que tu souhaites, il faut affecter une classe spécifique au lien de ton menu correspondant à la page actuelle.

**info007** · 12/01/2009, 12h23

merci pour ta réponse ,ça fait des jours que j'essaie avec cette solution.

peut tu m'aider à savoir comment affecter la classe (une fois définie) à mon lien pour la page actuelle.
par exemple j'ai définie la classe suivante:

Code :

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

1
2
3
4
 
.current{
color:red;
}

maintenant je ne vois plus comment l'affecter au lien concerné.

**Bovino** · 12/01/2009, 12h35

Code :

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

<a href="#" class="current">

**info007** · 12/01/2009, 12h44

Merci encore une fois.
juste une dernière question:

Code :

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

1
2
 
en faisant <a href="" class="current" >lien1</a>

lien1 sera toujours affiché selon la calsse current.

mon problème est comment faire ça dynamiquement?cad seulement en cliquant sur "lien1", je veux appliquer la classe 'current'.

**Bovino** · 12/01/2009, 12h47

Ca dépend de la structure de ton site...
Si tu navigues sur plusieurs pages HTML, tu pourras facilement appliquer la classe sur un lien différent à chaque fichier.
En revanche, si c'est une unique page PHP, il faut rajouter la classe en faisant un test sur quelle est la page en cours (par $_GET par exemple si tu fais passer la page à afficher dans l'URL)

**info007** · 12/01/2009, 12h54

en faite la structure de mon site est comme suit:

j'utilise un menu en haut de page, et on cliquant sur un item du menu je charger une page .

j'ai essayé de faire comme suit mais ça ne fonctionnait toujours pas:

Code :

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

1
2
3
<a href="liens_vers_page1" onfocus="this.className='current';"lien1</a>
 
<a href="liens_vers_page2" onfocus="this.className='current';"lien2</a>

**info007** · 12/01/2009, 13h30

Envoyé par info007

en faite la structure de mon site est comme suit:

j'utilise un menu en haut de page, et on cliquant sur un item du menu je charger une page .

j'ai essayé de faire comme suit mais ça ne fonctionnait toujours pas:

Code :

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

1
2
3
<a href="liens_vers_page1" onclick="this.className='current';"lien1</a>
 
<a href="liens_vers_page2" onclick="this.className='current';"lien2</a>

**Bovino** · 12/01/2009, 13h32

Non, c'est dans le code de ta page qu'il faut changer :
Page1.html

Code :

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

1
2
<a href="#" class="current">lien1</a>
<a href="liens_vers_page2">lien2</a>

Page2.html

Code :

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

1
2
<a href="liens_vers_page1">lien1</a>
<a href="#" class="current">lien2</a>

**info007** · 12/01/2009, 13h48

ok.

merci bien ,maintenant j'ai compris mais malheureusement je ne suis pas dans ce cas cad j'ai un seul menu dans la page d'accueil et je n'ai pas le code du menu dans chaque page de mon site .je travaille en faite avec struts tiles (si tu les connaissais déja):il ya une page "template" qui contient les partie statique de la page (menu en haut,menu a gauche par exemple) et toutes les pages héritent de cette ci en modifiant que le body.

merci beaucoup.

**devyan** · 12/01/2009, 14h33

Envoyé par info007

ok.

merci bien ,maintenant j'ai compris mais malheureusement je ne suis pas dans ce cas cad j'ai un seul menu dans la page d'accueil et je n'ai pas le code du menu dans chaque page de mon site .je travaille en faite avec struts tiles (si tu les connaissais déja):il ya une page "template" qui contient les partie statique de la page (menu en haut,menu a gauche par exemple) et toutes les pages héritent de cette ci en modifiant que le body.

merci beaucoup.

Salut,

Avec STRUTS tu travailles donc avec des JSP il te suffit donc de gérer de manière similaire à celle décrite pour PHP par Bovino vu que tu construits également ton contenu html dynamiquement

**info007** · 12/01/2009, 14h40

en faite ,mon problème c'est comment savoir quelle page est actuellement affichée?

cad je veux mettre :

Code :

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

1
2
3
4
5
 
si  la page1 est affichée alors
<a href="lien_vers__page"  class="current">lien1</a>
sinon 
<a href="lien_vers__page" >lien1</a>

**devyan** · 12/01/2009, 14h45

Tu peux ajouter un paramètre GET a tes liens pour le passer lors du clic...

Code :

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

<a href="http://monurl?choix=1">

Ensuite il ne te reste plus qu'à tester choix dans ta JSP...

**info007** · 12/01/2009, 14h56

GRAND MERCI A VOUS

effectivement ça fonctionne comme ça

Comment attribuer une couleur à un lien suite à un clic ?

CSS

Discussions similaires

Partager

Partager