garder l'onglet du menu en couleur après avoir cliqué

**alaninho** · 05/11/2013, 15h12

Bonjour à tous,

c'est un problème déjà existant mais j'ai bien du mal à comprendre comment ça marche.

En faite, j'ai un menu dans ma page php du style suivant :

Code html :

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

1
2
3
4
5
6
<div class="menu_central">
       <a href="test1.php">home</a>
       <a href="test2.php">tuto</a>
       <a href="test3.php">help</a>
       <a href="test4.php">examples</a>
</div>

J'aimerai que quand je clique sur tuto par exemple, le lien reste en couleur bleu.
Mais une fois que je clique sur un autre onglet, tuto redevient normal et c'est help par exemple quie est en bleu le temps que je reste sur la page.

J'espère avoir été clair, pour le moment mon seul moyen est de créer des class pour chaque lien et créer une page css pour chaque onglet, et l'appelé dans la page correspondante. Mais celà me semble très lourd. Une solution plus simple doit exister en css.

Merci

Alaninho

**NoSmoking** · 05/11/2013, 15h22

Bonjour,
as tu regarder du coté de la pseudo-classe :active?

**alaninho** · 05/11/2013, 15h25

Oui, mais active va garder la couleur bleu pour l'onglet sur lequel on est déjà passé donc celà veut dire que même si je change d'onglet le premier restera bleu car je suis déjà passé dessus.

**NoSmoking** · 05/11/2013, 16h13

Tu ne confondrais pas avec :visited?

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>pseudo class :active</title>
<style>
a{
  display:inline-block;
  width:10em;
  text-align:center;
}
a:active{
  font-weight:bold;
  color:red;
}
</style>
</head>
<body>
<div>
  <a href ="#">Lien 1</a>
  <a href ="#">Lien 2</a>
  <a href ="#">Lien 3</a>
</div>
</body>
</html>

**Bovino** · 05/11/2013, 16h26

NoSmoking, la pseudoclasse :active ne concerne que les liens au moment où ils sont activés, c'est-à-dire où ils sont cliqués.

alaninho, tu ne peux pas faire ce que tu souhaites (enfin, sous réserve que j'ai bien compris ta demande

) uniquement en JavaScript.

De toute façon, si ce sont des liens, alors tu es obligé de charger la nouvelle page, c'est dans le code de celle-ci que tu dois mettre un style spécifique au lien actif.
S'il s'agit d'un "pseudolien" (c'est-à-dire qu'il n'y a pas réellement de navigation), alors c'est avec JavaScript que tu devras adapter les styles de chaque lien, typiquement en affectant une classe donnée au lien actif et en la supprimant pour les autres liens.
Dans le cadre d'une navigation par onglets, il y a plusieurs exemples dans la page Cours JavaScript, notamment : Mise en place d'une navigation par onglets avec jQuery.

**alaninho** · 05/11/2013, 16h31

Je m'en doutais un peu que je ne pouvais pas en css. C'est pourquoi j'avais commencé à faire une page css pour chaque onglet en suivant les cours CSS et appelé cette page dans la page du site.

Merci pour vos réponse.

je vais regarder pour le javascript

garder l'onglet du menu en couleur après avoir cliqué

CSS

Vue hybride

Discussions similaires

Partager

Partager