JQuery URL Event Listeners

Question

I'm trying to get JQuery to highlight an element based on the link ID selector

For Example

<a href="#thisid">Goto Element with ID name</a>

Highlights the element below.

<div id="thisid" class="isNowHighlighted">FooIsCoolButNotBetterThenBar</div>

Iv tried searching for relevant plugins but no joy. Any ideas?

James · Accepted Answer · 2009-05-01 11:39:19Z

2

So you only want to add a class?

jQuery('a[href^=#]').click(function(){
    var id = this.hash.replace('#','');
    $('#' + id).addClass('isNowHighlighted');
});

EDIT:

In answer to your comment; you could do the same when the page loads:

$(document).ready(function(){
    if (window.location.hash) {
        $('#' + window.location.hash.replace('#','')).addClass('isNowHighlighted');
    }
});

edited May 1, 2009 at 11:39

answered May 1, 2009 at 11:20

James

112k32 gold badges165 silver badges177 bronze badges

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

1 Comment

FooListener Over a year ago

I think this would work (mostly anyway), however what if the link is not clicked. What if the document is loaded with /page/#thisid

Chad Grant · Accepted Answer · 2009-05-01 11:52:18Z

0

Since #thisId is not an anchor, it's kind of meaningless so I would do it like :

<a data-highlight="thisid" href="#">Goto ..</a>

$('a[data-highlight]').click(function(event){
    $('#' + $(this).data('highlight')).addClass('isNowHighlighted');
    event.preventDefault();
});

edited May 1, 2009 at 11:52

answered May 1, 2009 at 11:35

Chad Grant

45.6k10 gold badges67 silver badges80 bronze badges

3 Comments

James Over a year ago

Why does #thisid need to be an anchor? And why are you creating invalid attributes? A bit obtrusive!

Chad Grant Over a year ago

It doesn't need to be an anchor, but it has no meaning. I think that having an explicit attribute is easier to read/understand. I don't see anything obtrusive about it. I will edit for a less "obtrusive" way for you ;)

Chad Grant Over a year ago

Trust me JimmyP, the ladies love it

Collectives™ on Stack Overflow

JQuery URL Event Listeners

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related