The :target pseudo-class in CSS lets a developer style an anchor identifier (# in a URL, also known as a fragment identifier) differently. An example of this can be seen at http://www.twisty.com/misc/tests/css/target-trick.html Note: You'll need to use a modern browser like Firefox, Chrome, or Safari in order to see how it works.

Replicating this using JavaScript is fairly simple.

var target = window.location.hash.replace('#','');
document.getElementById(target).className = 'active';

The first line grabs the fragment identifier and removes the #. Then we find the element that has the same ID as the fragment identifer and we give it a class of 'active'. Then in your CSS you can style the selector .active any way you want.
Source(s):
http://www.w3.org/TR/css3-selectors/#target-pseudo
http://www.twisty.com/misc/tests/css/target-trick.html#b


Permalink | Report