Comment donner élément de menu actif style différent

Question

Mon menu est un tas de liens qui puis-je utiliser le style CSS pour que les boutons

<div id="menu"> 
    <a href="" class="mybutton">Item 1</a> 
    <a href="" class="mybutton">Item 3</a> 
    <a href="" class="mybutton">Item 3</a> 
</div> 

Lorsqu'un élément de menu est cliquée et est actif, ce qui est la meilleure façon de le style différemment? Est-ce que j'utilise jquery ou javascript pour ajouter une nouvelle classe? ou il y a un truc CSS pour ça?

Answer 1

pseudo-classe CSS :active peut être utilisé:

a.mybutton:active { 
    /* rules */ 
} 

Answer 2

La astuce CSS est

#menu a:active { 
    color: #f00; 
} 

Même chose pour : vol stationnaire et : visited

Bonne chance !

EDIT

En voyant maintenant que vous voulez que le lien vers la page que vous êtes sur d'être présentées différemment, je besoin de plus de détails. Utilisez-vous PHP? N'utilisez-vous pas un script php par page? Quoi qu'il en soit, cela devrait fonctionner, dans le cas où vous avez un fichier header.php que vous incluez dans toutes vos pages ou vous êtes simplement paresseux pour coder les classes pour chaque lien.

PHP:

// Return $return if this page is $page, false otherwise 
function is_current($page, $return) { 
    $this_page = $_SERVER['SCRIPT_NAME']; // will return /path/to/file.php 
    $bits = explode('/',$this_page); 
    $this_page = $bits[count($bits)-1]; // will return file.php, with parameters if case, like file.php?id=2 
    $bits = explode('?',$this_page); 
    $this_script = $bits[0]; // will return file.php, no parameters 
    return ($page == $this_script?$return:false); // return $return if this is $page, false otherwise 
} 

CSS

/* blue, no underline when normal */ 
a { 
    text-decoration: none; 
    color: #00f; 
} 
/* red, underlined when class active */ 
a.active { 
    text-decoration: underline; 
    color: #f00; 
} 

Votre fichier

<!-- Simply echo the function result for each link class --> 
<a href="home.php" class="<?php echo is_current('home.php','active'); ?>">Home</a> 
<a href="about.php" class="<?php echo is_current('about.php','active'); ?>">About</a> 

Answer 3

En supposant que vous voulez dire "Lorsque l'utilisateur consulte la page correspondant au lien" (par opposition à "Lorsque l'utilisateur a appuyé sur le bouton de la souris sur le lien mais pas encore publié"):

Incluez une classe dans le lien (par exemple, current), puis utilisez-la dans votre sélecteur. Ajouter la classe dans le code HTML de la page avant de le servir à l'utilisateur, avoir un processus côté serveur faire c'est généralement la meilleure méthode.