javascript - 使用 jquery 选择特定的 anchor 链接

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，我正在检测页面的哪个部分当前可见。这样我就可以获得 anchor 链接的Id部分。现在我如何选择特定的 anchor 链接？

我尝试过这个:

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

但这行不通(否则我就不会在这里!)。

Answer 1

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

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

<强> JSFiddle Demo

有关 attribute contains selector的更多信息