Indiquer la page active dans un sommaire
Comment mettre en relief la page active parmi une liste de liens? En comparant l'URL dans la liste avec l'URL de la page courante.
Par page active, on entend la page courante, ne pas confondre avec le lien actif désigné en CSS par la pseudo classe :active qui correspond au lien sur lequel on clique le bouton de la souris.
Pour savoir si un lien dans une liste correspond à la page courante, il faut du code JavaScript.
Pour obtenir l'URL de la page courante, on utilise l'objet location et la propriété href.
var pageurl = location.href;
Démonstration (cliquer pour afficher l'URL de cette page).
On change le style de la page courante dans la liste par exemple en affichant l'ancre en caractères gras ou en le soulignant. On peut aussi augmenter la taille, le décaler...
pageactive.style.fontWeight = "bold";
Il reste à retrouver la page courante dans une liste de liens...
Le code JavaScript complet:
<script>
function relief()
{
var pageurl = location.href;
var dnl = document.getElementsByTagName("a");
for(i = 0; i < dnl.length;i++)
{
var x = dnl.item(i);
if(x.href == pageurl)
{
x.style.fontWeight = "bold";
x.style.textDecoration = "underline";
}
}
}
window.onload=relief;
</script>
Démonstration avec un sommaire:
L'application pratique en est la pagination des articles, sur laquelle une réflexion doit être car elle a des conséquences pour les moteurs de recherche.