将锚标记与特定的 href 匹配

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 + '"]');