How to add an active class to an anchor tag based on URL and Vanity URLs?

Question

I have this working minus the part if the URL is www.mysite.com/home/. It works if it is www.mysite.com/home/index.aspx, but not if you take off the index.aspx. It also works for all other pages I have - page2.aspx, page3.aspx, etc...

Also, I might do a URL rewrite on the pages (so page2.aspx would be page2 and page3.aspx would be page3)

How do I adjust the below code to be able to add the class active to the active page.

jQuery:

$(function() {
    var pgurl = window.location.href.substr(window.location.href
    .lastIndexOf("/")+1);
    $("nav a").each(function(){
        if($(this).attr("href") == pgurl || $(this).attr("href") == '')
        $(this).addClass("active");
    })
});

HTML where the class is added:

 <nav class="clearfix">
  <a href="index.aspx">Home</a>
  <a href="page2.aspx">Page2</a>
  <a href="page3.aspx">Page3</a>
</nav>

Answer 1

You can simply check for window.location.pathname

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

Answer 2

Try this

var s = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
if(!s)
    document.querySelector("nav > a:first-child").className = "active";
else
    document.querySelector("nav > a[href*='"+s+"']").className = "active";

Answer 3

If you want to find the link with the same url part that you are looking for you can try this:

var lookup = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$("a:regex(href, .*"+ lookup +".*)").addClass('active');

Answer 4

Holy Cow figured out how to do the no index! I didn't think this was going to be so hard to get an answer on. Still not sure on the vanity bit. Might do separate post on that.

$(document).ready(function() {

// Add active class to menu
$(function() {
    var pgurl = window.location.href.substr(window.location.href
    .lastIndexOf("/")+1);
    $("nav a").each(function(){
        if($(this).attr("href") == pgurl)
            $(this).addClass("active");
        if (pgurl == '')
                $("nav a:first-child").addClass("active");
    })
});
});

Answer 5

I know, maybe this is stupid solution, but:

  var current_url = window.location.hash.substr(1);
  $('.news #' + current_url).addClass('active');