如何在列表项目中的锚点中添加类？

Question

我正在WordPress构建一个网站，需要在列表项目中的锚点元素中添加类。列表项目具有唯一的ID。我需要添加的课程将使我在锚点链接上平滑滚动。

我不想更改主题，这就是为什么我想与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>

因此，上述标签需要获得第二类：fl-scroll-croll-link，以便这将是结果：

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

我每天都在学习，可以利用您的帮助。请解释您建议的解决方案。

//解决方案//

非常感谢大家，我们在一起工作！哇！

因此，我犯了2个错误：

1. 我正在寻找一堂课，但当然应该在寻找ID。
2. WordPress使用jQuery而不是$！

工作代码是：

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

再次感谢，我很高兴！

Answer 1

列表项目（或WAS）上缺少闭合，

<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类添加到锚点中使用.addclass（）方法。将其应用于所有儿童＆lt; a＆gt;在菜单下方的元素，如下所示。由于您已经在使用jQuery，因此我也使用过。

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

另外，如果您想通过其锚固href值实际访问它，那么还有一个问题已经回答了这里：如何通过jQuery中的href获取元素？

在您的情况下：

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

关于“ $”的错误消息不确定，这意味着您的jQuery库未加载您的jQuery库。您需要确保在网站加载jQuery之后添加自定义JavaScript ...或以下是一种纯JavaScript的方法，可以将类添加到该＆lt; a＆gt;标签中。

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

或者，如果您想将该类应用于列表项目下的所有＆lt; a＆gt;标签。

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

• https://api.jquery.com/addclass/
• https://jsfiddle.net/3efhkbxa/