CSS- Highlight a div when the id is linked to using an anchor?

What I am attempting to do is to highlight a div with a certain id, when It has been referred to by an anchor on another page IE:

User clicks link href="qw.html#test", when the page is loaded, then the div with the id="test" is highlighted so that the user can see it clearly.

I'm sure that I've seen a CSS3 example where a div is highlighted if it was linked to. Or was it JavaScript?

Answers


You need to use the :target pseudo-class:

:target {
   background-color: #ffa;
}

JS Fiddle demo.


You can do this in JavaScript. Refer to How to get the anchor from the URL using jQuery? on how to get the anchor from URL and then it can be something simple like

document.getElementById(hash).style.backgroundColor="Yellow";

JavaScript can be used to dynamically add/change the class of the div:

If you have:

<div id="test"></div>

Javascript function, executed by the click of the anchor:

document.getElementById("test").className += " highlighted";

Result:

<div id="test" class=" highlighted"></div>

Need Your Help

Adding .jar's to classpath (Scala)

scala jar jvm classpath

So I've been trying to work with the signal-collect framework and I downloaded the .jar files and extracted it into a folder. Currently the folder structure looks like:

Closing a view displayed via a modal segue

objective-c ios cocoa-touch uistoryboard

I'm manually invoking a segue (set as modal) in order to display a login form in Xcode 4.2 using Storyboards with the following line of code: