CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Junaid Hussain
Junaid Hussain

Reputation: 45

selecting current anchor with jquery on the same page

is there a way to select the current anchor and have it visible on every section of a one page site? For example all my pages (home/contact/shop etc) are on one page, in a horizontally scrolling layout. When I select the anchor, it highlights the current anchor but does not keep that anchor highlighted when it scrolls to the next section of the page. Instead its highlighted and as the scroll begins the highlight of the anchor disappears. Here's the code I am using:

$('#nav a').click(function() {
alert($(this).attr('href'));
});

I had thought about using jquery ui to do it, but it seems a little too much just to carry out this operation. So highlight the current anchor of the item, in the same page, but when scrolling to a different section remaining highlighted. Thoughts?

Thanks in advance

Upvotes: 0

Views: 1438

Answers (2)

mekwall
mekwall

Reputation: 28974

I guess you are talking about the default overlay on focus that happens when you click an anchor?

How about adding a class to the currently active section instead:

$("#nav a").click(function() {
    var self = $(this), className = "active";
    self.addClass(className).siblings("."+className).removeClass(className);
    ...
});

You might also want to check this answer since it could be related. If this answer is not helpful to you my advice is to create a test case on jsFiddle to help you describe your problem further.

Upvotes: 1

wanovak
wanovak

Reputation: 6127

Like this?

JS:

$('#nav a').click(function(){
    $('#nav a').removeClass('highlighted');
    $(this).addClass('highlighted');
});

CSS:

.highlighted {
    background: #ffffeo;
}

Upvotes: 0

Related Questions