这是一个由来已久的网页设计标准，即标题区域中的徽标链接到网站的主页。另一个标准是，在显示网站导航时，以某种方式突出显示“当前”页面，如果它出现在导航中。我认为这些都是很棒的标准。徽标链接的事情是如此普遍，以至于如果你用这种方式编码，无论你是否编码，你的用户都可能会自动尝试它。当前导航的事情仅仅是老生常谈，可以帮助用户定位，并让他们对他们在网站层次结构中的当前位置感到满意。
但这里还有一个很好的设计标准：**不要在页面上链接到同一个页面。**
这里有双重目的
- 当您看到一个链接时，它看起来像一个链接，它像一个链接一样工作，上面写着“点击这里并被带到其他地方”。如果链接将您带回同一个页面，那就有点奇怪了。
- 没有理由重新加载页面，这会浪费服务器资源。
您如何在不进行大量开发工作和更改标记的情况下实现这一点？当然是用 CSS！
这里最大的想法是，您可以使用 CSS 属性 pointer-events 来告诉链接不要像链接一样工作（点击时不执行任何操作）。
主页的正文有一个唯一的 ID
<body id="home">导航有一个匹配的类名
<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="clients"><a href="#">Clients</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</nav>主页的导航仅在主页上被禁用
#home nav .home > a {
pointer-events: none;
cursor: default;
}哇，太容易了，对吧？这在 Firefox 3.6+、Safari 3+ 和最新的 Chrome 版本（v5+？）中有效。Opera 或 IE 还没有。但是，嘿，对于如此小的开发投资来说，这非常棒。
让此方法起作用的技巧之一是获得一个可以在正文中使用的 ID 或类。如果您对此概念还不太了解，请查看 这篇文章 和 这个视频，了解基本原理。此外，请注意，像 WordPress 这样的 CMS 有一个body_class();函数，它在正文中提供所有您可能需要的类名。
感谢 Ant Gray 提供了这个想法！
嗯……有趣的解决方案。
此致！
.home a:active {
pointer-events: none;
cursor: default;
}
“:active”并不总是代表当前页面
这对我来说似乎非常危险。链接在被点击时处于“:active”状态。如果您在此期间关闭指针事件，您可能会有效地禁用整个主页上的所有链接。
如果我想添加另外 10 个菜单项，我将不得不编辑 CSS - 这是一种不好的做法。
最好为当前菜单项添加类 .active
这是一个很好的观点，它需要一些维护，但我认为这并不意味着它是坏习惯。我想向任何阅读本文的人澄清，类 .active 与伪类 :active 非常不同。
这正是我个人使用“selected”而不是“active”作为当前页面类名的原因。这样可以保持清晰的区分。
我同意 banzalik 的观点，因为 CSS 旨在定义与内容无关的样式。
假设您有一个个人主页，导航中有 5 个链接。现在您想添加一个关于您的狗或关于您的计算机的新页面。为什么要为此更改 CSS？
您页面的整体样式已定义。您要做的就是添加一些内容。
我仍然不明白在正文标签中使用 ID 的意义。
您提供的这个示例意味着您在服务器端添加了这个 ID。但是，您可以像这样简单地做
<li class="about nolink"><a href="#">关于</a></li>在您的服务器脚本中。这似乎更合理。在我看来。
这也可以……但对正文进行 ID 操作有很多其他用途，而这更具体，（IMO）语义更少，需要一些程序员干预才能完成。
更改正文中的 ID 需要程序员吗？:) 还是不需要？
可能需要。如果 1）您已经在这样做，则可能不需要。2）您正在使用像 WordPress 这样的 CMS，它有一个简单的函数来执行此操作。3）您很熟悉如何添加类似的东西
<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">这似乎是最好的方法。
啊，是的，马的逻辑。没有什么比传统的网页设计和现代光标事件更棒的了。
好主意，我不知道这个属性，但在我看来，这个解决方案没有满足你提到的标准：“不要在页面上链接到同一个页面。”
如果某些东西是链接，则由标记而不是 CSS 定义。在您的标记中，“主页”链接仍然是一个链接，因为“主页”这个词仍然具有将其链接到 URI 的元信息。
提到的标准在可访问性方面很重要，例如，在屏幕阅读器中，无法显示当前活动链接的样式。因此，如果您遍历页面上的所有链接，您将无法选择再次点击当前已访问的链接。
如果您确实想满足提到的设计标准，您应该更改您的标记。设计良好的 CMS 应该为您完成此操作。
绝对是一个很好的观点。如果您有能力更改生成的标记，那可能是一个好方法。
但使用它的另一个原因，事实上这可能是它被添加到 CSS 功能中的原因，是删除导航元素周围的链接可能会删除唯一可以定位它的标签。如果您使用的是标准的“无序列表”导航，您可能可以使用<li>元素以相同的方式对其进行样式设置，但这并非保证。如果您根本不使用列表项，锚标签可能是您拥有的全部，删除它可能会破坏菜单的布局。
两种可能性
– 使用 span 标签而不是锚标签来表示活动的“链接”（这是我在关心此标准时所做的事情）。正如您在下面几条评论中提到的那样。
– 使用没有 href 属性的锚标签。我不确定这是否是正确的方法，以及所有浏览器是否在您这样做的情况下不会链接该词，但这只是我想到的。
然后您必须将 CSS 选择器更改为 a:link，简单的“a”选择器将用于当前活动链接。
删除 href 属性不会影响样式，您始终可以通过在 CSS 中添加 :link 来定位具有 href 属性的<a>标签。
我实际上经常使用没有 href 属性的<a>标签，尤其是在使用 JavaScript 时，但这并不是说我没有备用方案。
我做了一个例子，我认为它做得很好
http://static.laszlokorte.de/html/active_link.html
您可能还想覆盖默认的 :active 样式……因为点击活动链接仍然会导致默认的活动链接样式（下划线和蓝色）。
我认为您可以在 CSS 中执行此操作很聪明，但这感觉不像是在 CSS 的职责范围内禁用链接 - 这是在 CSS 中完成的行为（这和在 JavaScript 中完成外观/布局一样糟糕）。
我完全同意……
对于样式表来说，存在“事件”属性也很奇怪，因为事件通常是定义脚本语言的东西。
这是我们在未来版本的 CSS 中会看到更多的东西，还是只是一个例外？
即使是像我这样不会编写 JavaScript 并且仍然难以使用 jQuery 的人，我也必须同意。处理行为不是 CSS 的职责。我赞成 CSS 处理动画，因为这仅仅是如何显示某些东西，但对于像这样的任何事情，它都应该保留在 JavaScript 的领域。
我认为这是一个非常有趣的讨论话题。我认为 pointer-events 是迄今为止最接近侵入这个领域的功能。有些人可能会争辩说，甚至 :hover 也过于行为导向（我不同意）。更多的人说，过渡/动画是行为（我不同意）。但这个几乎无可争议地与行为相关。
我一直对在 body 标签上添加 ID 非常谨慎。它们提供了很多机会，但人们经常，尤其是在团队中，最终会使用过于特定的规则依赖于 body 标签。尽管在项目开始时建立了适当的编码模式，但我仍然经常看到
<pre><code>body#someid #main #content p {some rules}</code></pre>
而实际上只需要
<pre><code>#content p {some rules}</code></pre>
如果你对多个页面使用同一个样式表（这很常见），#content p 不一定会位于 #main 内部，#main 也不一定会位于 body#someid 内部，这意味着你只能在它存在的页面上定位它。这就是给 body 标签添加 ID 或类的原因。
或者，如果某个页面（例如首页）具有明显不同的样式，特别是当样式应用于其他页面上也存在的元素/ID 时。
pointer-events 是否适用于所有主流浏览器？
Bill: 请再次阅读文章。Chris 清楚地说明了支持的浏览器。
很酷的想法。我前几天还在思考这个问题。我认为这在大多数情况下都会有效，但在某些情况下，如果你有子页面但没有子导航，它可能不起作用。你希望让用户有机会回到他们第一次访问页面/部分时的状态（除了点击浏览器刷新按钮）。或者，如果你有动态内容（滑块等），你希望能够重新加载内容。例如，你的代码片段主页。我发现我使用类似的链接来重新加载页面，就像使用徽标把我带回到主页或许多 Google 服务一样（点击 Gmail 徽标手动检查新邮件）。如果动态内容将通过页面刷新显示，那么你可能希望保持按钮为链接（如 Twitter 侧边栏中的提及链接等）。
@Chris – 好的标准，你也应该实现它。
我可能会。就像所有事情一样，需要认真考虑。例如，在这个网站上，你可能正在查看免费资源区域，特别是与 CSS 相关的免费资源。导航将表明代码片段是当前的，但点击它会把你带回到 JavaScript 内容。所以这是一个艰难的决定，但因为它会把你带到一个完全不同的位置，所以它可能不应该被禁用。
另外，我总是觉得你的主页有点混乱，因为“文章”选项卡被标记了，但主页有许多其他内容，例如视频教程和代码片段。因此，如果我点击文章，我期望进入一个只有文章的页面，而不是主页。一个简单的解决方案就是把“文章”按钮改成“主页”。仅供参考。
此外，文章标题会带你到同一个页面。
这让我想起你之前做过的关于 WordPress 导航高亮的视频教程，但这个更简单 :)
Chris，你实际上自己在这做了，你将这个页面上的博客文章标题链接到了同一个页面（这里）！
这与我上面的评论一致。在博客文章中这样做是有意义的，因为你可能希望重新加载页面以查看新更新的评论。或者有时我会右键点击页面标题以获取链接以发布到其他地方。
如果“关于”有子页面，例如“我们的历史”、“使命”、“董事会”、“社区参与”等，你不会禁用指向“关于”的链接吗？
如果你使用 > 选择器，就不会有问题。
试试这个
糟糕。
（Chris，请添加评论预览）。
感谢你的提示，Chris。确实很不错！
虽然我同意这里的大多数评论，认为这是一个好主意，但在生产代码中 10% 也并不实用。
还有很多其他强大的工具，开发人员会更倾向于使用它们。例如，在 Rails 中，你可以使用 link_to_unless_current。
但是，如果你不在 Rails 中，或者没有执行生产代码，这对于“不能做就模拟的原型”来说非常棒。
哦，Rails，你太聪明了。如果它是当前的，它会将链接包装在什么中？什么都没有，还是使用 <span> 或者其他什么？让我担心的是，对于当前页面，只是删除链接而不是使用这个 CSS，它可能会删除你用来定位文本的唯一标签。
你说的很对。我提供的 Ruby 解决方案会删除 <a> 标签，所以你需要在设计 UI 时考虑到这一点。
我只是用它作为单个示例。还有很多方法可以使用 JS（我相信你已经知道）来管理这种情况。
但我仍然认为这是一个很棒的原型解决方案，可以模拟用例。
仅供参考：在 Rails 中，你甚至可以提供一个额外的参数来指定如果生成的链接是活动的，该怎么做。
虽然有很多方法可以获得相同的结果，但我认为 JS 可能能够最好地处理这个问题 - 只需编写一个函数，将链接中的 href 与当前 URL 进行比较；如果相同，则将其删除（href，而不是 <a>），或者只添加 onclick=”return false;” 或者其他什么。这样更动态；你不需要为每个页面硬编码 CSS。
$#|+
Chris，我在上面的帖子中不小心打成了 ss，而不是 dd。你可能需要修复一下。抱歉！
我们应该能够编辑自己的评论（或者至少删除它们）。
这个页面标题链接到同一个页面，这很有讽刺意味。解决方法：如果你使用 WordPress，请在 single.php 中删除锚链接。
我应该这样做。我通常会这样做，但我认为在某个时候我决定在那里放一个链接是有原因的。我认为出于某种原因，我养成了右键点击并复制博客文章标题 URL 的习惯，当我想要做一些事情，比如在 Twitter 上分享它的时候。如果它消失了，我会感到困扰。但我应该克服它，并将其删除，因为它显然没有必要。
Chris，你可以用地址栏来做这个 :)
如果你用它，它就很必要。
感谢你，Chris！这个技巧很简单，但很有用！我会在我的下一个网站项目中使用它。
哇，这太酷了。我听说过更复杂的方法，但这绝对是最直接的。
我会在我的下一个项目中尝试一下！:)
不错的帖子，Chris，pointer-events 非常有趣！
根据我的经验，你并不总是希望那个链接处于非活动状态。
在我工作的时尚零售网站上，主导航栏中的“女装 男装 童装”链接实际上是网站部分的链接，而不是唯一的独立页面。例如，点击“女装”会把你带到女装子部分的着陆页，并在主导航栏中突出显示“女装”。
从那个页面，你可以深入到单个产品页面，但“女装”仍然在主导航栏中被突出显示，以指示你所在的子部分，即使它不是指向该单个产品页面的链接。
在这种情况下，您希望该链接高亮显示以指示您所在的子部分，但也希望它可点击，以便用户可以返回主女性页面。
我最近改变了对这个网页设计格言的想法。对于常规的主页，当然，但在 Reddit 和 Hacker News 这样的网站上，我经常点击只是重新加载当前页面的链接，以防出现一些新故事。在 iPad 上，这尤其方便，因为重新加载按钮非常小，而且您没有简单的 Cmd+R 替代方案 :-)
所以......从现在开始，我在所有网站上都保留着指向当前页面的链接。这不会伤害任何人，我的访问者足够聪明，能够理解页面重新加载是什么，而且由于大多数客户都赞赏条件性 GET，因此几乎不会消耗任何资源。务实胜过教条。
这个版本运行速度更快，并且所有浏览器都支持，即使是 Opera 和 IE。
然后，该 CSS 选择器将匹配所有页面，并禁用所有页面的首页链接，而不仅仅是首页，这就是 body ID 的作用，将其限制在当前页面。
而且 pointer-events 属性是 Opera 和 IE 中不起作用的部分，而不是选择器本身。
只是想让任何阅读此信息的人都能清楚地理解信息。
我已经在上面发布了一个链接，但如果您没有注意到
谢谢，当然，我有
#home a.home {pointer-events: none;
cursor: default;
}
我刚刚发现，我发布的代码在 Firefox 中不起作用。这个简单的解决方案是将 a:link 选择器扩展为“，a:visited”，因为在 FF 中，已访问的链接不再匹配 a:link。
不错。让 CSS 来弥补不足。CSS 可能只是代表创造性事物解决方案，也许吧......
太棒了！我忘记了这一点。这简直是天才。
哇？我不知道你可以这样做。感谢分享。
Chris，我理解这种冲动，但这确实是一个非常糟糕的主意。出于几个原因，总结如下
1) 仅仅因为你无法想到人们想要点击指向同一页面的链接的原因，并不意味着没有这样的原因。
2) 链接不会说“去别的地方” - 链接说，并且自从互联网开始就一直说：去这个链接指向的任何地方，无论是在页面的更下方、在模态窗口中，还是其他地方。
关于 1，也许用户希望刷新页面而不点击“刷新”。特别是对于文章/博文标题等，也许他们希望确保他们在规范/完整地址。为什么要让那个用户感到沮丧？就像现实生活中一样，对设计师来说微不足道的一点努力，对用户来说可能会很烦人，甚至令人沮丧。
关于 2，这实际上可能会在 SEO 方面困扰一个人。我相信 Google 已经考虑了一些 JavaScript 行为，而且没有理由认为他们将来不会考虑。网络爬虫，就像网页用户一样，都依赖于链接正常工作。如果这意味着链接到完全相同的页面，那就这样吧。
此外，这在您的界面导航的核心引入了所谓的模态错误。模态错误是指同一件事在两种不同情况下以两种不同的方式运行，这是一个很大的可用性禁忌。
当我作为一名普通网页用户，去点击您页面上的这个链接，而它没有任何作用时，我至少会感到短暂的困惑，并开始思考技术，而不是内容。这总是一个不好的迹象。（更令人担忧的是，有些人试图展现能力的形象，这可能会让我怀疑该网站是否“坏了”。这可能有一些可用性问题，但主要对网站不利，而不是对用户不利。）
在阅读了所有评论之后，我不得不赞同 DN 的上一条评论，这是一种不正常的行为，改变了人们目前与导航元素的交互方式，无论从“设计”角度来看这都是有道理的，从 UIX 行为角度来看这可能会让人困惑，并使页面的目标复杂化，即内容，而不是通过改变典型查看者习惯与网页交互的方式来交换功能。
哇，很酷的技巧！我用它来禁用小型移动屏幕上图像的灯箱缩放操作。我以为我可能要找到一种方法来禁用脚本。这真是一个简单的解决方案。