Select 特定锚 link 与 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部分link。现在我如何 select 那个特定的锚点 link？

我试过这个：

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

但这不行（否则我不会在这里！）。

Answer 1

:contains会检查锚标签的html()/text()部分，锚标签的href需要使用属性选择器，如下图[=17] =]

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

JSFiddle Demo

有关 attribute contains selector 的更多信息

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");

这里linkenter link description here

Select 特定锚 link 与 jquery

Select specific anchor link with jquery

javascript

anchor

jquery