Using Page Url with jQuery

Question

I've browsed a few other questions on here with getting current page url with jQuery and/or plain javascript but I have been having no luck.

My goal is this: depending on what page the user is on, I want a border under that menu item. This is how I am attempting to do it:

var urlHome = 'http://example.com/'
var urlShop = 'http://example.com/shop/'
var urlTeam = 'http://example.com/team/'

if (document.url.is(urlHome)) {
    $('#home-link').css('border-bottom', '1px solid #000');
}
else if (document.url.is(urlShop)) {
    $('#shop-link').css('border-bottom', '1px solid #000');
}
else if (document.url.is(urlTeam)) {
    $('#team-link').css('border-bottom', '1px solid #000');
};

Unfortunately this code isn't working for me, I'm open to any and all suggestions, thank you in advance for your help.

Answer 1

var loc = window.location.href,id="";
     if (loc === urlHome) id = "home";
else if (loc === urlShop) id = "shop";
else if (loc === urlTeam) id = "team";
if (id) $('#'+id+'-link').css('border-bottom', '1px solid #000');

This works for me, with my own variables of course :)