清除 :target CSS 伪类答案

【问题标题】：Clearing off :target CSS psuedo class清除 :target CSS 伪类
【发布时间】：2012-10-06 01:40:04
【问题描述】：

最近我一直致力于Shower HTML5+CSS3 presentation template 的工作，以准备即将发布的演示文稿。 Shower 使用CSS :target pseudo-class，这使得在幻灯片概览中可以轻松识别当前幻灯片。

我了解:target 如何通过 URL 中的哈希工作，但我无法让它从所有元素中清除 :target CSS。

所以我的问题是：在一个元素被:targeted 之后，我们如何清除所有:target 并使用JavaScript 将其恢复为标准？ History API 的使用似乎不起作用。

【问题讨论】：

【解决方案1】：

我之前尝试过以下两种说法，但都不起作用（至少在 Firefox 上）：

history.pushState({}, 'null', window.location.pathname);
window.location.href.substr(0, window.location.href.indexOf('#'));

诀窍是改用这个：

window.location.hash = '';

只有当我们试图通过 JavaScript 清除 :target 选择时，才会出现问题。具有不存在或空哈希的锚标签有效：http://jsfiddle.net/SMbsb/3/

【讨论】：

【解决方案2】：

要在不使用 Javascript 的情况下通过链接清除哈希目标，您可以使用 href="#" 创建另一个 <a> 标签。

简单示例：http://jsfiddle.net/Y5XB7/
点击上方黑色方块以激活:target，然后点击下方黑色方块将其清除。

<a href="#" ...> ... </a>

【讨论】：