用jQuery选择特定的锚链接

Question

我有一个像这样的菜单结构：

<ul class="menu">
    <li class="parent">
        <a class="menu-link" href="http://url.com/#Id">Id</a>
    </li>
    <li class="parent">
        <a class="menu-link" href="http://url.com/#Id">Id</a>
    </li>
</ul>

和英文版，菜单如下：

<ul class="menu">
    <li class="parent">
        <a class="menu-link" href="http://url.com/en/#Id">Id</a>
    </li>
    <li class="parent">
        <a class="menu-link" href="http://url.com/en/#Id">Id</a>
    </li>
</ul>

使用scrollspy，我正在检测页面的哪个部分当前可见。 因此，我可以获得锚链接的ID部分。 现在如何选择特定的锚链接？

我尝试了这个：

$('.menu').find(":contains('#" + this.id"')" ).addClass('active');

但这不起作用（否则我就不会在这里！）。

Answer 1

:contains将检查锚标记的html() / text()部分，您需要对锚标记的href使用属性选择器，如下所示

$('.menu').find("a[href*='#" + this.id + "']" ).addClass('active');

JSFiddle演示

有关属性的更多信息包含选择器

Answer 2

如何使用数据绑定来分隔url（应为SEO）并设置独立于url查询的id？ 我希望您使用一些模板引擎来呈现此html代码。 如果不是可以的话，只有一个以上的属性。

例如：

<ul class="menu">
<li class="parent">
    <a class="menu-link" href="http://url.com/en/topic-for-women" data-id="1">Id</a>
</li>
<li class="parent">
    <a class="menu-link" href="http://url.com/en/topic-for-men" data-id="2">Id</a>
</li>

为此，您可以使用非常简单的jquery调用：

$(".menu .menu-link[data-id='2']").addClass("active");

这里的链接在这里输入链接描述