如何将 class 添加到列表项中的锚点？

Question

我正在 Wordpress 中构建网站，需要向列表项内的锚元素添加 class。列表项具有唯一 ID。我需要添加的 class 将使我在锚 link.

上平滑滚动

我不想改变主题，这就是为什么我想添加 class 和 JavaScript，或任何更好的技术。

这是我试过但不起作用的方法：

$('li#menu-item-318').find('a').addClass('fl-scroll-link');

我的控制台出现此错误：

TypeError: $ is not a function. (In '$("#menu-item-318 a")', '$' is undefined) Error: {}

这是我网站上的具体代码：

<nav class="top-bar-nav"><ul id="menu-topbalk"><li id="menu-item-318"><a href="#contactgegevens" class="nav-link">Contact</a></li></ul></nav>

所以上面的一个标签需要得到这一秒class: fl-scroll-link 所以这将是结果:

<a href="#contactgegevens" class="nav-link fl-scroll-link">Contact</a>

我每天都在学习，需要你的帮助。请说明您提出的解决方案。

// 解 //

非常感谢大家，我们一起成功了！万岁！

所以我犯了2个错误：

我正在寻找一个 class 但当然应该寻找一个 ID。
Wordpress 使用 jQuery 而不是 $!

工作代码是：

jQuery(document).ready(function($) {
    $("#menu-item-318 a").addClass("fl-scroll-link");
});

再次感谢，我很开心！

Answer 1

您的列表项（或曾经）缺少闭包

<nav class="top-bar-nav">
  <ul id="menu-topbalk">
    <li id="menu-item-318">  <!-- missing ">" here -->
      <a href="#contactgegevens" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>

要将 fl-scroll-link class 添加到锚点，请使用 .addClass() 方法。将其应用于菜单下方的所有子 <a> 元素，如下所示。既然你已经在使用 jquery 我也用过它。

jQuery(document).ready(function($) {
    $("#menu-item-318 a").addClass("fl-scroll-link");
});

此外，如果您想通过其锚点 href 值实际访问它，还有另一个问题已在此处回答：How to get an element by its href in jquery?

你的情况：

jQuery(document).ready(function($) {
    $('a[href="#contactgegevens"]').addClass("fl-scroll-link");
});

有关“$”未定义的错误消息意味着您的 jquery 库未被加载。您需要确保在网站加载 jquery 后添加您的自定义 javascript... 或以下是一种纯粹的 javascript 添加 class 的方式<a> 标签。

document.querySelector('a[href="#contactgegevens"]').classList.add("fl-scroll-link");

或者如果您想将 class 应用于列表项下的所有 <a> 标签。

document.querySelector('#menu-item-318 a').classList.add("fl-scroll-link");

如何将 class 添加到列表项中的锚点？

How can I add a class to an anchor in a list item?

javascript

wordpress

jquery

href