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

Then once you've accessed the URL 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

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./test#headerOne

http://website./test#headerTwo

Then once you've accessed the URL http://website./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

• javascript
• jquery
• html
• css

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

2 Answers 2

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;
}

So I want to highlight the header...

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

Just an example (with a smooth animation):

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

h2:target {
   background: #000;
}