javascript - 清除 :target CSS 伪类

Question

最近我一直在研究Shower HTML5+CSS3 演示模板来制作即将发布的演示文稿。Shower 使用CSS:target伪类，可以在幻灯片概览中轻松识别当前幻灯片。

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

所以我的问题是：考虑到一个元素被:target编辑后，我们如何清除所有元素:target并将其恢复为使用 JavaScript 的规范？History API 的使用似乎不起作用。

Answer 1

我之前尝试过以下两个语句，但它不起作用（至少在 Firefox 上）：

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

诀窍是改用它：

window.location.hash = '';

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

Answer 2

要在不使用 Javascript 的情况下通过链接清除哈希目标，您只需<a>使用href="#".

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

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