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.

try if (document.url == urlHome) etc.... .is is a jquery function — Ted
– Ted, Commented Feb 13, 2015 at 16:55
JavaScript is case sensitive, and doesn't have an is function. document.URL === urlHome should work. — Brian Hoover
– Brian Hoover, Commented Feb 13, 2015 at 16:56
And if you store that in a variable you can pass it like this var _href = document.location.href; if (_href === 'example.com/shop/') {execute code etc. — lharby
– lharby, Commented Feb 13, 2015 at 16:58

mplungjan · Accepted Answer · 2015-02-13 21:38:54Z

3

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 :)

edited Feb 13, 2015 at 21:38

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Feb 13, 2015 at 16:55

Tacticus

57111 silver badges25 bronze badges

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

5 Comments

Mr.Smithyyy Over a year ago

Thank you, i thought .is was the same as ===

mplungjan Over a year ago

Please only load the href once and set css once

Tacticus Over a year ago

@mplungjan : I'm not 100% sure what that would change. Would copying the href value into a separate variable and checking that instead of the original be better? Feel free to edit the code.

mplungjan Over a year ago

Ok, changed it to a less verbose version

Tacticus Over a year ago

Thank you, it's nice to know there's always something one can learn :)

void · Accepted Answer · 2015-02-13 16:55:18Z

2

Just do

if(document.URL == urlHome)
{
// Whatever
}

answered Feb 13, 2015 at 16:55

void

36.7k10 gold badges71 silver badges111 bronze badges

2 Comments

Mr.Smithyyy Over a year ago

Thank you! I didn't know there was a difference between == and .is

void Over a year ago

Anytime, Dont forget to mark it as correct answer... Cheers!

Collectives™ on Stack Overflow

Using Page Url with jQuery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related