Me gustaría agregar una clase a los enlaces que contienen la variable "activeLink".

La intención es resaltar el enlace activo actualmente, lo que significa el enlace que apunta a donde está el usuario actualmente.

Esto es lo que he intentado:

//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');
  }
});
3
Jenny 21 ene. 2018 a las 01:11

3 respuestas

La mejor respuesta

No es necesario .each en este caso, ya que .find "buscará los descendientes de estos elementos ".

Respuesta basada en la necesidad de solo el nombre de archivo (y opcionalmente la cadena de consulta pero no la url completa)

//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');
1
Hastig Zusammenstellen 20 ene. 2018 a las 23:00

Puede usar String.prototype.includes() para encontrar si el enlace contiene esa cadena en lugar de es igual a esa cadena.

var activeLink = getQueryVariable("pagename");

$('.nav a').each(function(index, element) {
    if($('.nav a').attr("href").includes(activeLink)) {
        $(this).addClass('active');
    }
});
0
connexo 20 ene. 2018 a las 22:16

Su función parece correcta con pequeños cambios

Probar esto

 $(document).ready(function(){
   var activeLink = getQueryVariable("pagename");
   $('.nav a').each(function(index, element) {
      if($(this).attr("href").indexOf(activeLink) != -1)
         $(this).addClass('active');
   });
  });
0
Alen.Toma 20 ene. 2018 a las 22:29