11

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

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

4

7 回答 7

6

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

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

...在 CSS 中...

a#active { color: yellow; }

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

于 2008-10-08T00:02:57.757 回答
5

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

例如，当 StackOverflowclass="youarehere"指向您已经在的页面时，它会呈现链接。

于 2008-10-07T23:58:18.250 回答
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 %}">Ask Question</a></li>
  </ul>
</div>

bodyclass然后在页面模板中填写like so：

<!-- 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; }
于 2008-10-08T00:04:56.117 回答
2

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

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

这是一个很好的更长的解释

于 2008-10-08T00:00:35.750 回答
2

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

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}
于 2008-10-08T00:11:32.310 回答
0

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

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

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

于 2008-10-08T00:08:54.063 回答
-2

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

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

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

于 2008-10-08T00:01:27.387 回答