Html 如何根据当前页面突出显示链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/180887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I highlight a link based on the current page?
提问by Click Online Design
Sorry if this sounds like a really stupid question, but I need to make a link change colour when you are on the page it links to.
对不起，如果这听起来像一个非常愚蠢的问题，但是当您在链接到的页面上时，我需要使链接更改颜色。
For example, when you are on the "Questions" page of StackOverflow, the link at the top changes colour. How do you do this?
例如，当您在 StackOverflow 的“问题”页面上时，顶部的链接会改变颜色。你怎么做到这一点？
采纳答案by John Millikin
It's a server-side thing -- when rendering the page, add a class like "current-page" to the link. Then you can style it separately from the other links.
这是服务器端的事情——在呈现页面时，向链接添加一个像“当前页面”这样的类。然后，您可以将其与其他链接分开设置。
For example, StackOverflow renders the links with class="youarehere"when it points to the page you're already on.
例如，当 StackOverflowclass="youarehere"指向您所在的页面时，它会呈现链接。
回答by steve_c
It really depends on how your page is constructed. Typically, I would do this using CSS, and assign give the link an id called "active"...
这实际上取决于您的页面是如何构建的。通常，我会使用 CSS 来执行此操作，并为链接分配一个名为“active”的 ID...
<a id="active" href="thisPage.html">this page</a>
...and in the CSS...
......在CSS中......
a#active { color: yellow; }
Obviously this is a fairly simplistic example, but it illustrates the general idea.
显然，这是一个相当简单的例子，但它说明了总体思路。
回答by Jonny Buchanan
You can do this without having to actually modify the links themselves for each page.
您可以这样做而无需实际修改每个页面的链接本身。
In the Stack Overflow clone I'm building with Django, I'm doing this:
在我用 Django 构建的 Stack Overflow 克隆中，我这样做：
<!-- 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>
Then filling in the bodyclasslike so in page templates:
然后bodyclass在页面模板中像这样填写：
<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...
Then, with the following CSS, the appropriate link is highlighted for each page:
然后，使用以下 CSS，为每个页面突出显示相应的链接：
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; }
回答by Kon
If for some reason you don't want to handle this on the server-side, you can try this:
如果由于某种原因你不想在服务器端处理这个，你可以试试这个：
// assuming this JS function is called when page loads
onload()
{
if (location.href.indexOf('/questions') > 0)
{
document.getElementById('questionsLink').className = 'questionsStyleOn';
}
}
回答by John Sheehan
Set a class on the body tag for each page (manually or server-side). Then in your CSS use that class to identify which page you're on and update the style on the item accordingly.
在每个页面的 body 标签上设置一个类（手动或服务器端）。然后在您的 CSS 中使用该类来识别您所在的页面并相应地更新项目的样式。
body.questions #questionsTab
{
color: #f00;
}
回答by Cade Roux
Server side code is the easiest, by just setting a class on the link on the current page, but this is also possible on the client-side with JavaScript, setting a second class on all elements in a particular class which have an href which matches the current page.
服务器端代码是最简单的，只需在当前页面上的链接上设置一个类，但这也可以在客户端使用 JavaScript，在特定类中具有匹配的 href 的所有元素上设置第二个类当前页面。
You could use either document.getElementsByTagName() or document.links[] and look only for those in a class denoting your navigation links and then set a second class denoting current if it matches the current URL.
您可以使用 document.getElementsByTagName() 或 document.links[] 并仅查找表示导航链接的类中的那些，然后设置表示当前的第二个类（如果它与当前 URL 匹配）。
The URLs will be relative, while document.URL will not. But you can sometimes have this same problem with relative vs. absolute on the server-side if you are generating content from a table-driven design and the users can put either absolute or relative URLs anyway.
URL 是相对的，而 document.URL 不是。但是，如果您从表驱动设计生成内容并且用户无论如何都可以放置绝对 URL 或相对 URL，那么在服务器端，相对与绝对 URL 有时会遇到同样的问题。
回答by Leigh Caldwell
You need code on the server for this. A simplistic approach is to compare the URL of the current page to the URL in the link; however consider that there are many different URLs in stackoverflow which all result in the 'Questions' tab being highlighted.
为此，您需要服务器上的代码。一个简单的方法是将当前页面的 URL 与链接中的 URL 进行比较；但是考虑到 stackoverflow 中有许多不同的 URL，所有这些 URL 都会突出显示“问题”选项卡。
A more sophisticated version can either put something in the session when you change pages (not too robust); store a list of pages/URL patterns which are relevant to each menu item; or within the code of the page itself, set a variable to determine which item to highlight.
更复杂的版本可以在您更改页面时在会话中放置一些东西（不太健壮）；存储与每个菜单项相关的页面/URL 模式列表；或者在页面本身的代码中，设置一个变量来确定要突出显示的项目。
Then, as John Millikin suggests, put a class on the link or on one of its parent elements such as "current-page" which will control the colour of it.
然后，正如 John Millikin 所建议的那样，在链接或其父元素之一上放置一个类，例如“当前页面”，它将控制它的颜色。
