Question

Script:

$(".classname li a").each(function() {
    var hreflink = $(this).attr("href");
    if (hreflink == location.href) {
        $(this).addClass("active");
    } else {
        $(this).removeClass("active");
    }
});

CSS:

.classname li a.active{color:#ef9223;}

Whenever I do a page refresh, if the same link is on a different page, the active class is no longer applied to that link.

Actual exmple
i have the following Navigation links A B C D E F G H …. Z. And the same Navigation is in the main page(header section).. so when i click on any one link .. it needs to be active on when i arrive to any one A B C D E..or Z pages. And even on page refresh it needs to retain the active link. Hope that explains…and helps 🙂

Any help, inputs, solution would be much appreciated.

Answer 1

Inside of your each loop, this is actually the anchor tag not the tag that has the class ‘classname’. Your css should be:

.active {color:#ef9223;}

Also, you do not need the remove class if this code is being run on page load.

CHeck out this jsFiddle for an example – http://jsfiddle.net/XWLWL/7/