Question

我有一个带有带有导航链接的侧栏的仪表板，当您转到该链接时，我会在侧面突出显示每个链接。我通过这样做来匹配链接

$(function() {
    var item = $('.sidebar-menu a[href="' + location.href + '"]');

    item.parent().addClass('active');
});

但是问题是，如果您在地址中添加井号（＃），则它不再与链接匹配。而且我希望它与之匹配。

当前它将匹配：

mysite.com/students/companies

但是不匹配：

mysite.com/students/companies＃
mysite.com/students/companies/subpage

我希望它匹配包含“ mysite.com/students/companies”的所有内容

Answer 1

我认为您遇到了问题，因为您的锚标签看起来像这样：

<a href='somethingelse.php'>Something Else</a>

我注意到您称父div为..您将锚标签用div或ul，li或其他方式包装。

您可以简单地添加一些额外的数据，例如'data-user =' 所以<div data-user='companies'><a href='somethingelse.php'>Something Else</a></div>

所以现在，如果有人将进入公司内部或进行其他活动，请执行以下操作：

var url_string = window.location.href;
var url = url_string.split('/')
var item = $('div[data-user='+url[3]+']).addClass('active');

适用于网页的外观如下： www.some.com/companies 和 www.some.com/companies/sometihng 甚至 www.some.com/companies/sometihng/more

Answer 2

尝试一下

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

var item = $('.sidebar-menu a[href*="' + location.pathname + '"]');

将锚标签与特定的href匹配

2 个答案: