Add class to href if it links to current page

Question

I'm currently trying to make a javascript function to check if a link on the page links to the same page, and if so, add a class to it.

What I currently have:

$(document).ready(function() {
  var currentPage = location.pathname;
  if $("a[href*=currentPage]") {
  $("a").addClass( "active" );
  }
});

However, this doesn't seem to work. Any help appreciated.

See the syntax in that question for how to use a variable in an attribute selector. — isherwood
– isherwood, Commented Sep 25, 2014 at 16:10
There are a couple of basic errors in this code, and a variable should not be included in a string like that. Maybe you would benefit from following some beginners tutorials as well. — GolezTrol
– GolezTrol, Commented Sep 25, 2014 at 16:11

Jonas Grumann · Accepted Answer · 2014-09-25 16:11:03Z

3

var currentPage = location.pathname;
$('a').each(function() {
    var currentHref = $(this).attr('href');
    if(currentHref == currentPage) {
        $(this).addClass("active");
    }
})

Should do the trick. Pay attention to the fact that some links might include the domain.

answered Sep 25, 2014 at 16:11

Jonas Grumann

10.8k2 gold badges26 silver badges44 bronze badges

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

3 Comments

iCollect.it Ltd Over a year ago

Most links will be relative links, but not necessarily, You may need to remove the website root(s) before comparing to be safe.

RoflcopterV RoflcopterV Over a year ago

How would you remove the website roots?

RoflcopterV RoflcopterV Over a year ago

Unable to get this solution to function, it doesn't add a class to any link to the current page.

Eugene_Dv · Accepted Answer · 2014-09-25 17:38:21Z

2

You can use pure JavaScript (IE 9 and above)

var currentPage = location.href;
var allA = document.getElementsByTagName('A');
for(var i = 0, len = allA.length; i < len; i++) {
    if(allA[i].href == currentPage) {
         allA[i].className = "active";
    }
}

answered Sep 25, 2014 at 17:38

Eugene_Dv

1011 silver badge4 bronze badges

Collectives™ on Stack Overflow

Add class to href if it links to current page

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related