Hightlight Anchor ID when visited by an Anchor URL

Question

EDIT:

Someone mentioned this was possible in CSS so I looked it up and that is exactly what I needed!

CSS

You need to use the :target pseudo-class:

 :target { background-color: #ffa; } 

JS Fiddle demo.

Thanks David Thomas source

---

ALSO THANKS MILIND YOUR CODE IS ALSO WHAT I NEEDED

---

I've been trying to figure this out for a while.

When someone visits my page trough an URL like this:

http://jsfiddle.net/maNR5/show/#second

I want the header element with id second to be highlighted with a background color.

<div>

    <h1><a id="first">How can I...</a></h1>    

    <h1><a id="second">...make this...</a></h1>

    <h1><a id="turd">Highlighted when....</a></h1>    

    <h1><a id="furd">Visited by an...</a></h1> 

    <h1><a id="earth">Anchor URL</a></h1>


</div>

Is this possible in javascript? Thanks for any tips.

Answer 1

Try to use:

var hash = window.location.hash;
$('#'+hash).parent().css('background-color','red');

Answer 2

Try this:

 var id=window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
 $(id).css('background-color','red');

Answer 3

try this. when ever you click on any of the links change its color. Indicates that it is visited.

$("h1").each(function(a,b){
    $(this).find('a').click(function(){
        console.log(this);
        $(this).css('color','#333399');
    });
});