Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

javascript - Clearing off :target CSS psuedo class

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...