Search code examples
javascripthtmljqueryhref

How to add class to header element if its href is contained within window href?

My current code applies a class to the proper header element if its href is an indexOf the window.location.href

$(function() {
    $('.sidebar-links li.active').removeClass("active");
    $('.sidebar-links li a').filter(function(){
        return this.href.indexOf(window.location.href) !== -1;
            }).parent().addClass("active");
});

An example header href would be
http://localhost:8090/website/jobs.php
If my window.location.href matches that exactly, it works great. The issue that I am running into is, if I click on something that produces a query string like
http://localhost:8090/website/jobs.php?info=54
Then refresh the page, the header element no longer has the class.
Is it possible to change the function so that if the header element's href is contained within the window.location.href that it will add the class? Or without the query string at all?
http://localhost:8090/website/jobs.php
http://localhost:8090/website/jobs.php?info=54

Solution

  • You can remove the URL parameters using: url.replace(/\?.*/,'')

    In your code, change this.href.indexOf(window.location.href) !== -1 to this.href.indexOf(window.location.href.replace(/\?.*/,'')) !== -1