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

StackOverflow https://stackoverflow.com/questions/180887

  •  05-07-2019
  •  | 
  •  

题

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

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

有帮助吗？

解决方案

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

例如，当StackOverflow指向您已经在的页面时，会使用 class =＆quot; youarehere“呈现链接。

其他提示

这实际上取决于您的网页的构建方式。通常情况下，我会使用CSS执行此操作，并为assign指定一个名为“active”的ID ... 

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

......并在CSS ... 

a#active { color: yellow; }

显然这是一个相当简单的例子，但它说明了一般的想法。

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

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

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

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

这是一个很好的解释

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

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

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

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

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

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

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

然后，正如John Millikin建议的那样，在链接上或在其中一个父元素上放置一个类，例如“current-page”;这将控制它的颜色。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top