Comment mettre en surbrillance un lien basé sur la page actuelle?

StackOverflow https://stackoverflow.com/questions/180887

  •  05-07-2019
  •  | 
  •  

Question

Désolé si cela semble une question vraiment stupide, mais je dois faire en sorte que le lien change de couleur lorsque vous êtes sur la page vers laquelle il est lié.

Par exemple, lorsque vous vous trouvez dans la rubrique "Questions". page de stackoverflow, le lien en haut change de couleur. Comment faites-vous cela?

Était-ce utile?

La solution

C’est un problème côté serveur: lors du rendu de la page, ajoutez une classe du type "page courante". au lien. Ensuite, vous pouvez l'appeler séparément des autres liens.

Par exemple, StackOverflow rend les liens avec class = "vous êtes ici" lorsqu'il pointe vers la page sur laquelle vous vous trouvez déjà.

Autres conseils

Cela dépend vraiment de la façon dont votre page est construite. En général, je le ferais en utilisant CSS et j'attribuerais au lien un identifiant appelé "actif" ... 

<a id="active" href="thisPage.html">this page</a>

... et dans le CSS ... 

a#active { color: yellow; }

Évidemment, c’est un exemple assez simpliste, mais il illustre l’idée générale.

Vous pouvez le faire sans avoir à modifier les liens pour chaque page.

Dans le clone Stack Overflow que je construis avec Django, je fais ceci: 

<!-- base.html -->
...
<body class="{% block bodyclass %}{% endblock %}">
...
<div id="nav">
  <ul>
    <li id="nav-questions"><a href="{% url questions %}">Questions</a></li>
    <li id="nav-tags"><a href="{% url tags %}">Tags</a></li>
    <li id="nav-users"><a href="{% url users %}">Users</a></li>
    <li id="nav-badges"><a href="{% url badges %}">Badges</a></li>
    <li id="nav-ask-question"><a href="{% url ask_question %}">Ask Question</a></li>
  </ul>
</div>

Remplissez ensuite la bodyclass comme dans les modèles de page: 

<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...

Ensuite, avec le CSS suivant, le lien approprié est mis en surbrillance pour chaque page: 

body.questions #nav-questions a,
body.tags #nav-tags a,
body.users #nav-users a,
body.badges #nav-badges a,
body.ask-question #nav-ask-question a { background-color: #f90; }

Définissez une classe sur la balise body pour chaque page (manuellement ou côté serveur). Ensuite, dans votre CSS, utilisez cette classe pour identifier la page sur laquelle vous vous trouvez et mettre à jour le style de l'élément en conséquence. 

body.questions #questionsTab
{
    color: #f00;
}

Voici une bonne explication plus longue

Si, pour une raison quelconque, vous ne souhaitez pas gérer cela côté serveur, vous pouvez essayer ceci: 

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}

Le code côté serveur est le plus simple, il suffit de définir une classe sur le lien de la page en cours, mais cela est également possible du côté client avec JavaScript, en définissant une seconde classe sur tous les éléments d'une classe particulière qui ont href qui correspond à la page en cours.

Vous pouvez utiliser document.getElementsByTagName () ou document.links [] et rechercher uniquement ceux d'une classe désignant vos liens de navigation, puis définir une deuxième classe indiquant courant si elle correspond à l'URL actuelle.

Les URL seront relatives, contrairement à document.URL. Toutefois, vous pouvez parfois rencontrer le même problème avec les termes relatifs et absolus côté serveur si vous générez du contenu à partir d’une conception pilotée par une table et que les utilisateurs peuvent quand même définir des URL absolues ou relatives.

Vous avez besoin de code sur le serveur pour cela. Une approche simpliste consiste à comparer l'URL de la page actuelle à l'URL du lien. Cependant, considérez qu'il y a beaucoup d'URL différentes dans stackoverflow qui ont pour résultat que l'onglet "Questions" est mis en surbrillance.

Une version plus sophistiquée peut soit mettre quelque chose dans la session lorsque vous changez de page (pas trop robuste); stocker une liste de pages / modèles d'URL pertinents pour chaque élément de menu; ou dans le code de la page elle-même, définissez une variable pour déterminer l'élément à mettre en surbrillance.

Ensuite, comme le suggère John Millikin, définissez une classe sur le lien ou sur l’un de ses éléments parents, tel que "page courante". qui en contrôlera la couleur.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top