Lately I've been working on Shower HTML5+CSS3 presentation template to make a upcoming presentation. Shower uses the CSS :target pseudo-class which makes it easy to identify the current slide in the overview of the slides.
I understand how :target works through the hash in the URL, but however I cannot get it to clear the :target CSS from all elements at all.
So my question is: given that after an element has been :targeted, how can we clear all the :target and revert it to the norm using JavaScript? The use of History API doesn't seem to work.
I previously tried the following two statements and it didn't work (at least on Firefox):
history.pushState({}, 'null', window.location.pathname);
window.location.href.substr(0, window.location.href.indexOf('#'));
The trick is to use this instead:
window.location.hash = '';
The problem only exists if we're trying to clear the :target selection through JavaScript. Anchor tags with non-existing or empty hashes works: http://jsfiddle.net/SMbsb/3/
To clear the hash target with a link without using Javascript, you can just make another <a> tag with href="#".
Simple example: http://jsfiddle.net/Y5XB7/
Click on the top black square for the :target to be active, then click on the bottom black square to clear it.
<a href="#" ...> ... </a>
来源：https://stackoverflow.com/questions/12906509/clearing-off-target-css-psuedo-class