Comment indiquer qu'une LI avec un lien a été pressée.

Question

J'ai fait un menu et je veux garder un bouton enfoncé d'une couleur différente. C'EST À DIRE. Si je suis sur la page de menu, le bouton de menu du menu sera bleu.

J'ai lu quelques guides en ligne sur les menus et a fini avec les éléments suivants:

<div id="menu"> 

<ul> 

    <li> 
     <a href="/index.php" >home</a> 
    </li> 
    <li> 
     <a href="/search.php" >search</a> 
    </li> 
    <li> 
     <a href="#">1</a> 
    </li> 
    <li> 
     <a href="#">2</a> 
    </li> 
    <li> 
     <a href="#">3</a> 
    </li> 

</ul></div> 

Et le CSS serait quelque chose comme ceci:

#menu ul li a.selected{ 
background:blue; 
color:#000; 
} 

Bien sûr, chaque LI a une hauteur et d'autres choses de sorte qu'il a une certaine couleur. La question est comment puis-je dire au HTML qu'un bouton est sélectionné? L'attribut HTML ou quelque chose?

Et un autre dilemme que j'ai est la meilleure façon de changer ces sélectionnés? Je peux vérifier l'adresse en utilisant PHP et changer la sélection en fonction. Des suggestions comment le faire le mieux?

Answer 1

Vous pouvez aller avec:

<li> 
<a href="/search.php" 
<?php 
    if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php")) 
     echo "class='selected'"; 
?> 
> Home </a> 
</li> 

ou en utilisant le Javascript équivalent "document.URL". Peut-être pas la solution la plus propre mais devrait faire la chose.

Answer 2

pour une utilisation a:visited en CSS. il ne sera appliqué que si le lien a été utilisé avant

Answer 3

Vous pouvez utiliser a:visited et a:active en CSS. Il devient active lorsque vous cliquez dessus. Il devient visited si vous l'avez déjà visité.

Si vous souhaitez manipuler des boutons, vous pouvez envisager d'utiliser JavaScript (de préférence jQuery), puis vous pouvez facilement modifier les attributs d'élément en fonction des actions (par exemple onclick).

Answer 4

Essayez: active et: concentrer

#menu ul li a:active,#menu ul li a:focus{ 
    background:blue; 
    color:#000; 
}