How to check if href contains variable

Question

I would like to add a class to links that contain the variable "activeLink".

The intention is to highlight the currently active link, which means the link that points to where the user currently is.

Here is what I have tried:

//This gets the url parameter
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    var pair;
    for (var i=0; i<vars.length; i++) {
        pair = vars[i].split("=");
        if (pair[0] == variable){
            return pair[1];
        }
    }
    return false;
}

//This is where it is stored in variable activeLink
var activeLink = getQueryVariable("pagename");

//This is where I am having trouble
$('.nav a').each(function(index, element) {
  if($('.nav a').attr("href") == activeLink) {
    $(this).addClass('active');
  }
});

`if($('.nav a').attr("href") == activeLink)` should probably be `if(element.attr("href") == activeLink)`. — connexo, Jan 20 '18 at 22:19

Hastig Zusammenstellen · Accepted Answer · 2018-01-20T23:00:08.197

2

No need for .each in this case as .find will "search through the descendants of these elements".

Answer based on needing just the filename (and optionally query string but not the full url)

//var url = 'file://yi/er/san/page.php?page=4'; // use this variable for testing
var url = window.location.href;
var filepath = url.lastIndexOf("/") + 1;
var matchThis = url.substr(filepath);
$('.nav').find("a[href*='"+matchThis+"']").addClass('active');

credit - https://stackoverflow.com/a/1302339/3377049
original answer - jQuery current page via .find() and .each() function

edited Jan 20 '18 at 23:00

answered Jan 20 '18 at 22:20

Hastig Zusammenstellen

4,286
3
32
45

Spectacular solution! – HddnTHA Nov 16 '20 at 09:43

score 0 · Answer 2 · edited Jan 20 '18 at 22:16

0

You can use String.prototype.includes() to find if the link contains that string instead of equals that string.

var activeLink = getQueryVariable("pagename");

$('.nav a').each(function(index, element) {
    if($('.nav a').attr("href").includes(activeLink)) {
        $(this).addClass('active');
    }
});

edited Jan 20 '18 at 22:16

connexo

53,704
14
91
128

answered Jan 20 '18 at 22:14

Chris Riebschlager

1,323
1
8
12

score 0 · Answer 3 · answered Jan 20 '18 at 22:29

Your function seems right with smal change

try this

 $(document).ready(function(){
   var activeLink = getQueryVariable("pagename");
   $('.nav a').each(function(index, element) {
      if($(this).attr("href").indexOf(activeLink) != -1)
         $(this).addClass('active');
   });
  });

How to check if href contains variable

3 Answers3