Comment mettre en évidence un lien basé sur la page en cours?

Désolé si cela semble être une question stupide, mais j'ai besoin de faire un lien change de couleur lorsque vous êtes sur la page des liens vers elle.

Par exemple, lorsque vous êtes sur les "Questions" de la page de stackoverflow, le lien en haut change de couleur. Comment faites-vous cela?

source d'informationauteur Click Online Design

  1. 4

    C'est un serveur-côté de la chose, lors du rendu de la page, ajouter une classe comme "current-page" pour le lien. Ensuite, vous pouvez définir le style séparément des autres liens.

    Par exemple, StackOverflow rend les liens avec class="youarehere" quand il pointe vers la page que vous êtes déjà.

  2. 5

    Cela dépend vraiment de la façon dont votre page est construite. Généralement, je voudrais faire cela à l'aide de CSS, et d'attribuer donner le lien d'un identifiant appelé "active"...

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

    ...et dans le CSS...

    a#active { color: yellow; }

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

  3. 3

    Vous pouvez le faire sans avoir à modifier les liens eux-mêmes pour chaque page.

    Dans le Débordement de la Pile clone je suis en train de construire avec Django, je suis en train de faire 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>

    Puis de remplir le bodyclass comme dans les modèles de page:

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

    Puis, avec le code CSS suivant, le lien approprié est mis en évidence 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; }
  4. 2

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

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

    Voici une bonne explication plus longue

  5. 2

    Si pour quelque raison vous ne voulez pas gérer cela sur le 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';
  }
}
  6. 0

    Côté serveur code est le plus facile, simplement en définissant une classe sur le lien sur la page en cours, mais cela est également possible sur le côté client avec JavaScript, la définition d'une deuxième classe sur tous les éléments d'une classe particulière qui ont un href, qui correspond à la page en cours.

    Vous pouvez utiliser un ou l'autre document.getElementsByTagName() ou d'un document.liens de[] et de regarder uniquement dans une classe indiquant vos liens de navigation, puis une deuxième classe dénotant actuelle si elle correspond à l'URL courante.

    L'Url sera relative, tandis que le document.L'URL ne sera pas. Mais vous pouvez parfois avoir ce même problème avec les relatifs et absolus sur le côté serveur, si vous êtes la génération de contenu à partir d'une table-driven design et les utilisateurs peuvent mettre en absolu ou en relatif Url de toute façon.

  7. -2

    Vous avez besoin de code sur le serveur pour cette. Une approche simpliste est de comparer l'URL de la page à l'URL dans le lien; considère toutefois qu'il y a beaucoup de différentes Url dans stackoverflow, qui aboutissent à des "Questions", onglet en surbrillance.

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

    Puis, comme Jean Millikin l'indique, de mettre une classe sur le lien ou sur l'un de ses parent des éléments tels que "current-page" qui permettra de contrôler la couleur de celle-ci.