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

JavascriptCssHtmlAnchorHighlight

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

You need to use the :target pseudo-class:

:target {
   background-color: #ffa;
}

JS Fiddle demo.

Solution 2 - Javascript

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>

Solution 3 - Javascript

You can do this in JavaScript. Refer to https://stackoverflow.com/questions/3552944/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";

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionharley_woopView Question on Stackoverflow
Solution 1 - JavascriptDavid ThomasView Answer on Stackoverflow
Solution 2 - JavascriptblearnView Answer on Stackoverflow
Solution 3 - JavascriptYuriy GalanterView Answer on Stackoverflow