CODEWITHSUNDEEP
javascriptjquerycssurlhref
Alex
Alex

Reputation: 633

jquery if link = page url

ok pretty simple but i dont know how...

i just want to make an active state (probably just make it bold)

my menu is ul-li

i cant figure out how to write it so if the url matches with one of the links, make the link bold

please help

thanks for your time

Upvotes: 6

Views: 10845

Answers (2)

user113716
user113716

Reputation: 322462

Here's a short way to select links like that:

$('ul > li a[href$="' + window.location.pathname + '"]').css('font-weight','bold');

Or perhaps better like this, which does an exact match of both pathname attributes:

$('ul > li a[href]').filter(function() {
    return this.href.pathname === window.location.pathname;
}).css('font-weight','bold');

If you're using the full domain in the href, you could change it to:

return this.href === window.location;

Upvotes: 14

TheSturs
TheSturs

Reputation: 31

Here is a great solution I have used:

$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("selected");
               }
       });
});

Source - https://css-tricks.com/snippets/jquery/highlight-all-links-to-current-page/

Upvotes: 3

Related Questions