How to match current page url with nav bar?

Question

I need to compare the url of the page I am on to the li element in my nav bar, Using jQuery.

So far I have the current url assigned to a variable, like so

var currentPage = window.location.href;

then I have a .each function checking each item in the nav bar, like so

$("nav ul li a").each(
    function() {

    }
);

Now, I assume I need some kind of if statement inside the function, maybe something like this?

if(currentPage === ????) {};

What I can't figure it out is what to compare the url to from the list?

Basically I want whatever page I'm on to be highlighted in the nav bar. Once I figure out how to get jQuery to acknowledge what page I'm on and match it up with the nav bar, I will use .css to change the background image to make which ever page i'm on stand out on the nav bar. I am in a jQuery class and this is something that has been assigned.

I searched around on here and I couldn't find anything to really match was I'm trying to do.

Hopefully someone has some insight...if this question even makes sense, I'm practically pulling out my hair just trying to word this into a question, much less figure it out...

Answer 1

I think you might be looking for:

this.href

That should give you the actual href of the a tag you're looping over.

(Answer improved, thanks to comment below)

Answer 2

you can use parse(..) to match link whether is current page.the demo can't run correctly in stackoverflow,if you want to see the result,you should go codepen .

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> a { color: #000; } a.active { color: red; } </style> <nav> <ul> <li><a href="?home">Home</a></li> <li><a href="?contact">Contact</a></li> <li><a href="?about">About</a></li> <li><a href="?contact#hash">Contact Us</a></li> </ul> </nav> <script> function parse(url) { var parts = url.match(/^([^#?]*?)?(\\?.*?)?(#.*)?$/); return { uri: parts[1], search: parts[2], hash: parts[3], /** * * @param that <b>string</b>/<b>object</b> has `href` property,eg:location * @param hash skip hash matching * @param search skip search matching * @returns {boolean|*} if url matched return `true`,otherwise return `false`. */ match: function (that, hash, search) { var self = this, that = parse(typeof that == 'string' ? that : that.href); return (!self.uri || self.uri == that.uri) && (search || self.search == that.search) && (hash || self.hash == that.hash); } }; } $('nav li a').each(function () { console.log(['matching with ', this.href, '===>', parse(this.href).match(location)].join(' ')); console.log(['matching with ', $(this).attr('href'), '===>', parse($(this).attr('href')).match(location)].join(' ')); if (parse($(this).attr('href')).match(location/*,true*/))//remove comment and try the result. $(this).addClass('active'); }); </script> 

Answer 3

For anyone that looks at this I got it figured out using this and .each. Here's what it looks like.

var currentPage = window.location.href;

$("nav ul li a").each(
    function() {
        console.log($(this).attr("href"));
        if (currentPage.indexOf($(this).attr("href")) !== -1){
            $(this).addClass("highlight");
            return false;
        }
     }
);

I was WAY off when I first tried tackling this, I think I misunderstood my teacher and was over thinking the problem. Anyway this works great.