在导航菜单中选择当前或活动链接的语义方式 [英] Semantic way to select current or active links in navigation menu

问题描述

目前最常用的识别当前链接的方法是向锚点或其父代添加一个类：

Currently the most common way to identify the current link is adding a class to the anchor or its parent:

<li class="active"><a href="/">Home</a></li>

此技术有几个缺点：

• 添加类通常委托给服务器语言，这意味着只是为了演示而做的额外工作。


• 即使存在 active 类名，它是一个愚蠢选择器，并且语义上似乎不正确。

• Adding the class is often delegated to server languages and it means an extra work just for presentation.
• Even though there is a convention around the active class name, it's a stupid selector and doesn't seem to be semantically correct.

：

• 我寻找类似于：target 伪类的东西，选择器可以是： a：current ，不幸的是它还不存在。


• 我认为 rel 属性是一个很好的候选人，但我找不到任何适合。



• 添加和属性到 nav 设置当前链接，但是我们需要为每个链接添加 id s，CSS将变为verbose

• I looked for something like the :target pseudo-class, so the selector could be: a:current, unfortunately it doesn't exist yet.
• I thought the rel attribute was a good candidate, but I couldn't find any that fit.

• Adding and attibute to the nav that sets the current link, but we need to add ids to every link, and CSS will become verbose

<style>
[data-active^="home"] a[id^="home"]{ color:red; }
</style>
<nav data-active="home-link"><ul>
    <li><a id="home-link">Home</a>
    ...

Is there a different way to select current links that is semantically correct?

使用CSS选择当前链接或活动链接的目的

The purpose of selecting with CSS the current or active link is to give the user a clue about the section or document is currently viewing. As @BoltClock pointed out the active class is semantically meaningless and the question is if there is a semantically meaningful way to select the link that belongs to the section or document the user is visting?

推荐答案

类似于：target 伪类，所以选择器可以是： a：current ，不幸的是它不还存在。

I looked for something like the :target pseudo-class, so the selector could be: a:current, unfortunately it doesn't exist yet.

事实上，还没有这样的选择器，所以你已经是你最好的选择了。以下伪类声音就像它们可能是你正在寻找的，但它们意味着不同的东西：

Indeed, no such selector exists yet, so what you have is already your best bet. The following pseudo-classes sound like they might be what you're looking for, but they mean different things:

• ：active 匹配由光标指定的元素;

• :active matches an element that is being designated by the cursor; usually this means an element that is being clicked.

：target 匹配ID匹配的元素URL哈希片段，这意味着它只适用于哈希片段，而不适用于URL路径本身。

:target matches an element whose ID matches the URL hash fragment, which means it only works for hash fragments and not the URL path itself.

中出现了org / selectors-4 /＃the-current-pseudorel =nofollow> ：current ：它匹配按时间顺序的当前元素（通常在非基于时间的语言如HTML中表示this元素）。

:current appears in Selectors 4, but it means something quite different entirely: it matches the chronologically current element (which usually means "this element" in a non-time-based language such as HTML).

正如helion3指出的，使用类名的原因是因为它们是最简单的解决方案。请记住，即使HTML没有超过URL片段的当前文档语义，因此你真的不能比类名或带有硬编码值的自定义数据属性更远。

As helion3 has pointed out, the reason class names are used is because they're the easiest solution. Keep in mind that even HTML does not have "current-document" semantics beyond URL fragments, so you're really not going to be able to go any further than a class name or a custom data attribute with a hardcoded value.

我不同意您链接到的文章，但是不是其实是一个语义正确的方法因为没有伪类存在与适当的语义，再次你基本上坚持这一点。如果它让你感觉更好，注意类名在这种情况下不是语义上不正确的，而是在语义上无意义的，即它们对它们所处的上下文的含义没有任何影响，或整个文档。

I don't disagree with that article you've linked to either, but given there isn't in fact a "semantically correct" approach to this since no pseudo-class exists with the proper semantics, again you're basically stuck with this. If it makes you feel better, note that class names aren't really semantically incorrect in this case, rather they are semantically meaningless, i.e. they have no influence whatsoever on the meaning of the context they are in, or the document as a whole.

这篇关于在导航菜单中选择当前或活动链接的语义方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！