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

对不起，如果这听起来像一个非常愚蠢的问题，但我需要在链接页面上时改变链接颜色。如何突出显示基于当前页面的链接？

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

来源

2008-10-07 Click Online Design

问题很好地形成。所以这不是愚蠢的。 :) – 2008-10-08 00:10:08

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

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

来源

2008-10-07 23:58:18

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

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

Here's a good longer explanation

来源

2008-10-08 00:00:35

-2

您需要在服务器上为这对码。一个简单的方法是将当前页面的URL与链接中的URL进行比较;但是请考虑在stackoverflow中存在许多不同的URL，这些URL都会突出显示“问题”选项卡。

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

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

来源

2008-10-08 00:01:27

这实际上取决于你的页面是如何构建的。通常情况下，我会做到这一点使用CSS，并分配给的链接称为 “活跃” 的ID ...

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

...并在CSS ...

a#active { color: yellow; }

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

来源

2008-10-08 00:02:57

这真的是一个类应该用于，而不是一个ID – 2008-10-08 00:04:21

对不起，约翰，但我不同意在这里。由于它是问题中提及的导航链接，并且只会在页面上显示一次，因此ID更合适。如果它在页面上出现不止一次，则一个班级会更合适。 – 2008-10-08 00:14:57

如果你还有一个非活动课？我宁愿使用一个类，并保持它在同一类型，但要么工作正常。 – 2008-10-08 00:24:14

您可以做到这一点，而不必实际修改每个页面的链接本身。

在堆栈溢出克隆我与Django的建设，我这样做：

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

来源

2008-10-08 00:04:56

S通过在当前页面的链接上设置一个类，最简单的方法是使用最简单的方法，但在JavaScript的客户端也可以这样做，在特定类中的所有元素上设置第二个类，这些元素的href匹配当前页面。

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

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

来源

2008-10-08 00:08:54

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

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

来源

2008-10-08 00:11:32 Kon

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

回答

相关问题