Désolé si cela semble être une question vraiment stupide, mais je dois faire un lien changer de couleur lorsque vous êtes sur la page vers laquelle il est lié. Par exemple, lorsque vous êtes sur la page "Questions" de stackoverflow, le lien en haut change de couleur. Comment est-ce que tu fais ça?Comment mettre en surbrillance un lien basé sur la page en cours?
C'est une chose côté serveur - lors du rendu de la page, ajoutez une classe comme "current-page" au lien. Ensuite, vous pouvez le style séparément des autres liens. Par exemple, StackOverflow restitue les liens avec class="youarehere" lorsqu'il pointe vers la page sur laquelle vous êtes déjà. Par exemple, StackOverflow affiche les liens class="youarehere".
Définissez une classe sur l'étiquette de corps 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'objet en conséquence.
body.questions #questionsTab
{
color: #f00;
}
Vous avez besoin du code sur le serveur pour cela. Une approche simpliste consiste à comparer l'URL de la page en cours à l'URL du lien. Cependant, sachez qu'il existe de nombreuses URL différentes dans stackoverflow, ce qui entraîne la mise en évidence de l'onglet "Questions".
Une version plus sophistiquée peut soit mettre quelque chose dans la session lorsque vous changez de pages (pas trop robuste); stocker une liste de pages/modèles d'URL qui sont pertinents pour chaque élément de menu; ou dans le code de la page elle-même, définissez une variable pour déterminer quel élément mettre en évidence. Ensuite, comme le suggère John Millikin, placez une classe sur le lien ou sur un de ses éléments parents tel que "current-page" qui en contrôlera la couleur.
Cela dépend vraiment de la façon dont votre page est construite. En règle générale, je fais en utilisant CSS et assignez donner le lien d'un identifiant appelé « actif » ...
<a id="active" href="thisPage.html">this page</a>
... et dans le CSS ...
a#active { color: yellow; }
Évidemment, cela est un exemple assez simpliste, mais il illustre l'idée générale.
C'est vraiment ce à quoi une classe devrait être utilisée, pas un ID –
Désolé, John, mais je ne suis pas d'accord ici. Comme il s'agit d'un lien de navigation mentionné dans la question, et qu'il n'apparaîtra qu'une seule fois sur la page, un ID est plus approprié. Si cela devait apparaître plus d'une fois sur la page, une classe serait plus appropriée. –
Et si vous aviez aussi un cours non-actif? Je préfère utiliser une classe et garder tout dans le même type, mais fonctionne bien. –
Vous pouvez le faire sans avoir à modifier réellement les liens eux-mêmes pour chaque page.
Dans le clone Stack Overflow 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>
remplissage Ensuite, dans le bodyclass comme tant dans les modèles de page:
<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...
Puis, 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; }
Juste curieux, pourquoi construisez-vous un clone? – eyelidlessness
Comme point de départ pour http://stackoverflow.com/questions/172516/ –
S Le code côté serveur est le plus simple, en définissant simplement 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 un href correspondant la page actuelle.Vous pouvez utiliser document.getElementsByTagName() ou document.links [] et ne rechercher que ceux d'une classe indiquant vos liens de navigation, puis définir une deuxième classe indiquant l'actuelle si elle correspond à l'URL actuelle.
Les URL seront relatives, contrairement à document.URL. Mais vous pouvez parfois avoir ce même problème avec le côté relatif ou absolu du côté serveur si vous générez du contenu à partir d'une conception pilotée par table et que les utilisateurs peuvent de toute façon mettre des URL absolues ou relatives.
Si pour une raison quelconque, 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';
}
}
cet onload() est assez confus. Probablement window.onload = function() {} est mieux – Bor
question est bien formée. Donc ce n'est pas stupide. :) –