如何根据当前页面突出显示链接？答案

【问题标题】：How do I highlight a link based on the current page?如何根据当前页面突出显示链接？
【发布时间】：2010-09-15 21:42:12
【问题描述】：

很抱歉，这听起来像是一个非常愚蠢的问题，但是当您在链接到的页面上时，我需要让链接更改颜色。

例如，当您在 StackOverflow 的“问题”页面上时，顶部的链接会改变颜色。你是怎么做到的？

【问题讨论】：

问题格式正确。所以这并不愚蠢。 :)

标签： html css navigation

【解决方案1】：

这实际上取决于您的页面是如何构建的。通常，我会使用 CSS 执行此操作，并为链接分配一个名为“活动”的 id...

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

...在 CSS 中...

a#active { color: yellow; }

显然，这是一个相当简单的示例，但它说明了总体思路。

【讨论】：

这确实是一个类的用途，而不是一个 ID
对不起，约翰，但我希望在这里有所不同。由于它是问题中提到的导航链接，并且只会在页面上出现一次，因此 ID 更合适。如果它要在页面上出现不止一次，那么一个类会更合适。
如果你也有一个非活动课程？我宁愿使用一个类并将其全部保持在同一类型中，但两者都可以正常工作。
你为什么会有一个非活动的类？非活动状态将是具有默认样式的锚元素。
我会在这里使用一个类。如果您决定在页面底部或类似的地方重复导航怎么办？

【解决方案2】：

这是一个服务器端的东西——在渲染页面时，向链接添加一个类，如“current-page”。然后，您可以将其与其他链接分开设置样式。

例如，当 StackOverflow 指向您所在的页面时，它会呈现带有 class="youarehere" 的链接。

【讨论】：

【解决方案3】：

您可以这样做，而无需实际修改每个页面的链接。

在我使用 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 %}"></a></li>
  </ul>
</div>

然后在页面模板中像这样填写bodyclass：

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

然后，使用以下 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; }

【讨论】：

只是好奇，你为什么要建立一个克隆？

【解决方案4】：

在每个页面的正文标签上设置一个类（手动或服务器端）。然后在您的 CSS 中使用该类来识别您所在的页面并相应地更新项目的样式。

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

Here's a good longer explanation

【讨论】：

【解决方案5】：

如果由于某种原因你不想在服务器端处理这个问题，你可以试试这个：

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

【讨论】：

这个 onload() 有点令人困惑。可能 window.onload = function() {} 更好

【解决方案6】：

服务器端代码是最简单的，只需在当前页面的链接上设置一个类，但这也可以在客户端使用 JavaScript，在特定类中的所有元素上设置第二个类href 匹配当前页面。

您可以使用 document.getElementsByTagName() 或 document.links[] 并仅查找表示导航链接的类中的那些，然后设置第二个表示当前的类（如果它与当前 URL 匹配）。

URL 是相对的，而 document.URL 不是。但是，如果您从表格驱动的设计中生成内容，并且用户可以放置绝对或相对 URL，则有时在服务器端可能会遇到同样的问题。

【讨论】：

【解决方案7】：

为此，您需要服务器上的代码。一种比较简单的做法是将当前页面的 URL 与链接中的 URL 进行比较；但是考虑到 stackoverflow 中有许多不同的 URL，所有这些都会导致“问题”选项卡被突出显示。

更复杂的版本可以在您更改页面时在会话中添加一些内容（不太健壮）；存储与每个菜单项相关的页面/URL 模式列表；或者在页面本身的代码中，设置一个变量来确定要突出显示的项目。

然后，正如 John Millikin 所建议的，在链接或其父元素之一上放置一个类，例如“当前页面”，它将控制它的颜色。

【讨论】：