Adding CSS when you access a URL with a specific ID in it

Question

I have a page with multiple headers, which all have there own ID. The idea is when you click on a specific link, it takes you to the page with the headers and will scroll down to the appropriate header. However on some of the pages, there isn't enough content for the page to scroll down and for the header to site at the top of the page. So I want to highlight the header that the content references, so it's clear which content the link represents.

So the link would be something like

http://website.com/test#headerOne

http://website.com/test#headerTwo

Then once you've accessed the URL http://website.com/test#headerOne it would drop you down to on the page. But the page isn't long enough for the header to sit at the top of the page. So i want to be able to add a background colour to the header.

Updated HTML:

<h3> Header One </h3>
<a name="headerOne"></a>

<p>Content here</p>

I'm persuming some Jquery would need doing but not sure where to start with it. I was thinking of detecting the URL and then doing an if else statement, but this seems like a long winded approach.

Any help would be much appreciated.

Thanks

dynamically add css via jquery api.jquery.com/css oru use add class/remove class methods api.jquery.com/addClass — Okky
– Okky, Commented Jun 14, 2013 at 11:01

Community · Accepted Answer · 2017-05-23 10:25:07Z

7

Use :target:

/* I'm obviously assuming you're using h2 elements for headers,
   but adjust to taste */
h2:target {
    background-color: #ffa;
}

Or, if you need to support older browsers without :target support:

var el = document.getElementById(document.location.hash);
el.style.backgroundColor = '#ffa';

And, with a function:

function hashChanged(){
    var el = document.getElementById(document.location.hash);
    el.style.backgroundColor = '#ffa';
}

document.addEventListener('hashChange', hashChanged, false);

Or, to use classes (as suggested by @Fabrizio, which I should have thought of myself):

function hashChanged(){
    var el = document.getElementById(document.location.hash),
        highlight = 'headerHighlight';
    document.querySelector('.' + highlight).classList.remove(highlight)
    el.classList.add(highlight);
}

document.addEventListener('hashChange', hashChanged, false);

And use CSS to define the particulars of the class:

.headerHighlight {
    background-color: #ffa;
}

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jun 14, 2013 at 11:00

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabrizio Calderan Over a year ago

+1 but instead of changing the style.backgroundColor via javascript it's better to add a class with predefined style.

JDavies Over a year ago

Thank you! Apologies i didn't realise it's actually an a tag that's holding the #ID. So it's like so <h3>header one</h3><a name="headerOne">

David Thomas Over a year ago

Named-anchors should be removed, as they're obsolete, as of HTML5; use an id on the element you want to show instead.

Fabrizio Calderan · Accepted Answer · 2013-06-14 11:00:33Z

5

So I want to highlight the header...

Use :target pseudoclass : http://css-tricks.com/on-target/

Just an example (with a smooth animation):

h2 {
   background: none;
   transition: background 3s linear 0; 
}

h2:target {
   background: #000;
}

answered Jun 14, 2013 at 11:00

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

2 Comments

JDavies Over a year ago

+1 As the answer is correct, but the other answer included a little more detail

Fabrizio Calderan Over a year ago

I agree, other answer gives some hints for older browser.

Collectives™ on Stack Overflow

Adding CSS when you access a URL with a specific ID in it

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related