How to add class to a link if it is the current URL?

Question

I want to add class to link if it's the current URL.

The URL structure is like that: http://localhost/search?date=2010&number_of_books=10;

/search?query1&query2&query3...

I can add class to a 'current URL link' with that code:

<script>
    $(document).ready(function($) {
        $("a").each(function () {
            var href = $(this).attr('href');
            var current_url = location.pathname + location.search;
            if (current_url == href) {
                $(this).addClass('active');
            }
        });
    });
</script>

How can I check if the current page URL (search parameters) and a link's URL (search parameters) same then I can add a class to this link?

For example if I'm on the page: /search?date=2010&author=Adam+Smith and if a link href is /search?author=Adam+Smith&date=2010 then I want to add class to this link, too. (Note: Consider that, both two link has the same parameters.)

basically you need to check the querystring parameter of the link, kindly see my post below for the reference. — Jeric Cruz, Nov 03 '16 at 14:30

Aks · Answer 1 · 2016-11-03T14:21:39.907

I'm not sure that I get your points, your code should be working, can you give you your output and a sample of HTML Page ?

Otherwise, you can simply use Query Selector or JQuery :

var currentURL = (window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1));
var currentURLLink = document.querySelectorAll("a[href='"+currentURL+"']");

This will get the last segment of your URL and then get an array with all links matching this. If your links href are full path, then you can use a regex to get only the search part.

Then you can simply add a class to this var :

currentURLLink[0].setAttribute("class", "Your Class");

score 0 · Answer 2 · edited May 23 '17 at 10:32

you can search for the querystring parameter using this snippet

function getURLParam(){  
  $("a").each(function () {           
        var author = getParameterByName("author", $(this).attr('href'));
        var date = getParameterByName("date", $(this).attr('href'));
        console.log(author);
        console.log(date);
        if (author == "Adam Smith" && date == "2010") {
             $(this).addClass('blackx');
        }
  });
}

//https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

.blackx{
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="getURLParam();">get params</button><br>
<a href="http://localhost/search?author=Adam+Smith&date=2010">link</a><br>
<a href="http://localhost/search?author=Adam+Gold&date=2011">link</a>

Kindly refer to this post: How can I get query string values in JavaScript?

ismailperim · Answer 3 · 2016-11-03T14:40:42.773

You can try this;

function getQueryString(name) {
        var url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
   }
        
$(document).ready(function($) {
    $("a").each(function () {
            var href = $(this).attr('href');
            var path = href.split('?')[0];
            var search = href.split('?')[1];
            if(path == location.pathname)
            {
                var qs = search.split('&');
                var allEqual = true;
                for(var i in qs)
                {
     var key = i.split('=')[0];
                    var val = i.split('=')[1];
                    if(getQueryString(key) != val)
                    {
                      allEqual = false;
                      break;
                    }
                }
                
                if(allEqual && search.split('&').length == location.search.split('&').length)
                {
                 //add class here
                  alert('add class here');
                }
            }
    });
});

How to add class to a link if it is the current URL?

3 Answers3