当前位置：文江博客话题详情

如何突出显示基于当前页面的链接？

发布于 2024-07-06 03:39:41 字数 115 浏览 6 评论 0原文

抱歉，如果这听起来像一个非常愚蠢的问题，但我需要在您位于链接到的页面时使链接改变颜色。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

朮生 2024-07-13 03:39:41

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

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

回复收藏 0 原文

青衫儰鉨ミ守葔 2024-07-13 03:39:41

这实际上取决于您的页面的构建方式。通常，我会使用 CSS 来完成此操作，并为链接分配一个名为“active”的 id...

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

...在 CSS 中...

a#active { color: yellow; }

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

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"...

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

...and in the CSS...

a#active { color: yellow; }

Obviously this is a fairly simplistic example, but it illustrates the general idea.

回复收藏 0 原文

哀由 2024-07-13 03:39:41

您可以执行此操作，而无需实际修改每个页面的链接本身。

在我使用 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：

<!-- 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; }

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:

<!-- 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 bodyclass like so in page templates:

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

Then, with the following CSS, the appropriate link is highlighted for each 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; }

回复收藏 0 原文

不知所踪 2024-07-13 03:39:41

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

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

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

回复收藏 0 原文

初心未许 2024-07-13 03:39:41

如果由于某种原因您不想在服务器端处理此问题，您可以尝试以下操作：

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

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';
  }
}

回复收藏 0 原文

贩梦商人 2024-07-13 03:39:41

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

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

这里有一个很好的更长的解释

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.questions #questionsTab
{
    color: #f00;
}

Here's a good longer explanation

回复收藏 0 原文

向地狱狂奔 2024-07-13 03:39:41

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

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

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

回复收藏 0 原文

~没有更多了~

关于作者

绻影浮沉

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何突出显示基于当前页面的链接？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

yangzhenyu123

lvzun

执笔绘流年

芯好空

始于初秋

谁与争疯

友情链接

如何突出显示基于当前页面的链接？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

yangzhenyu123

lvzun

执笔绘流年

芯好空

始于初秋

谁与争疯

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。