Mettre en surbrillance le lien actif

Comment puis-je faire en sorte que le lien actif soit mis en surbrillance lorsque vous cliquez dessus, mais que le lien de la page d'accueil est mis en surbrillance jusqu'à ce qu'un autre lien soit cliqué?

J'utilise PHP si cela aide.

Voici mon (x) code HTML.

<div id="nav"> <ul> <li><a href="http://localhost/link-1/" class="active">Link 1</a></li> <li><a href="http://localhost/link-2/">Link 2</a></li> <li><a href="http://localhost/link-3/">Link 3</a></li> <li><a href="http://localhost/link-4/">Link 4</a></li> </ul> </div> 

Je ne suis pas sur place pour pouvoir tester cela maintenant, laissez-moi savoir si cela fonctionne pour vous.

 var menuArray = new Array(); $(function() { $('div#nav ul li').each(function(i) { menuArray[i] = this; $(this).click(function() { for (var x in menuArray) if (x == this) $(x).attr('class','active'); else $(x).attr('class','inactive'); }); }); }); 

Émettez-moi bien, j'ai pu tester cela et ça fonctionne pour moi. Gardez à l'esprit que cela doit être postérieur à votre déclaration HTML.

 $("li a").each(function(i) { $(this).click(function() { $(this).attr('class','selected'); $("li a").not(this).attr('class','notselected'); }); }); 

Vous pouvez faire une méthode dans php, voici un exemple:

 <div id="nav"> <ul> <li><a href="http://localhost/link-1/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-1')?>>Link 1</a></li> <li><a href="http://localhost/link-2/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-2')?>>Link 2</a></li> <li><a href="http://localhost/link-3/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-3')?>>Link 3</a></li> <li><a href="http://localhost/link-4/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-4')?>>Link 4</a></li> </ul> </div> <?php function activateLink($uri,$var) { if($uri==$var) { return 'class="active"'; } } ?> 

Sur chaque page, imprimez $ _SERVER ['REQUEST_URI'] et passez le deuxième paramètre à la méthode.

Cela ne nécessitera pas du tout PHP, mais vous pouvez le créer sur PHP. Je vous démontrerai comment créer ceci en HTML / CSS.

Essayez ce CSS / HTML dans votre document (avant votre code):

 <style> .active { color:#336699; } div#nav ul li a { color:#121212; } div#nav ul li a:visited { color:#336699; } </style> 

Cela devrait colorier tous les liens bleus s'ils ont été visités, et s'ils ne sont pas gris gris foncé. Cependant, si vous voulez qu'il ne mette en surbrillance qu'un lien, il est préférable d'utiliser JQuery car il dispose d'une multitude de fonctions pour ne choisir que celui qui est sélectionné.

J'espère que cela pourra aider.