Question

我想在包含变量“activeLink”的链接中添加一个类。

目的是突出显示当前活动的链接，这意味着指向用户当前所在位置的链接。

以下是我的尝试：

//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');
  }
});

Answer 1

在这种情况下不需要.each因为.find将“搜索这些元素的后代”。

基于仅需要文件名（以及可选的查询字符串但不是完整的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
原始回答 - jQuery current page via .find() and .each() function

Answer 2

您可以使用String.prototype.includes()查找链接是否包含该字符串，而不是等于该字符串。

var activeLink = getQueryVariable("pagename");

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

Answer 3

你的功能似乎正确而且变化很小

试试这个

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

如何检查href是否包含变量

3 个答案: