Javascript 添加'；主动'；类中的纯文本锚定菜单

我试图将一个活动类添加到纯文本无序列表（即，不是Wordpress菜单）上单个Wordpress页面中的锚行中。我目前正在使用插件将脚本添加到标题中，但我无法让任何东西正常工作，因此我想知道我是否犯了错误，或者插件是否正常工作

我尝试了在堆栈上找到的每一个脚本，添加了一个类，但没有任何变化。我不知道是插件还是我的代码

HTML:
<div class="dotnavcon">  
<nav class="ot-anchordots">
                <ul>
                    <li><a href="#early-years" class="dot"><span>EYP</span></a></li>
                    <li><a href="#middle-years" class="dot"><span>PYP</span></a></li>
                    <li><a href="#middle-years" class="dot"><span>MYP</span></a></li>
                    <li><a href="#diploma" class="dot"><span>DP</span></a></li>
                </ul>
            </nav>
</div>

CSS: 
.ot-anchordots ul li a.active{color:#FFf; text-align:right; background:#fff;}

JS:
var $navLIs = $('nav.ot-anchordots ul li a')
$navLIs.find('a').click(function() {
  $navLIs.removeClass('active');
  $(this).parent().addClass('active');
});

OR (among others):

const navsStr = '.ot-anchordots ul li a';

$(navsStr).on('click', function (e) {
  e.preventDefault();
  const href = $(this).find('a').attr('href');
  let items = $(navsStr).find('a[href$="' + href + '"]');
  $(items).parent().addClass('active').siblings().removeClass('active');  
});

HTML：






CSS:
.ot主播ots ul li a.active{颜色：#FFf；文本对齐：右；背景：#FFf；}
JS:
变量$navLIs=$（'nav.ot-anchordots ul li a'）
$navLIs.find（'a'）。单击（函数（）{
$navLIs.removeClass（'active'）；
$（this.parent（）.addClass（'active'）；
});
或（除其他外）：
const navsStr='ot anchordots ul li a'；
$（navsStr）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
常量href=$（this.find（'a'）.attr（'href'）；
let items=$（navsStr.find（'a[href$=“'+href+'”）；
$（items）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});

---

当您单击点并将其转到锚点时，链接应获得一个“活动”类：点应填充，行名称应保持可见。

在这两种情况下，您的问题是您选择了

a

，然后运行

。查找（'a'）

，因此您没有选择元素。这就是为什么运行

警报

或

控制台日志

检查变量是否为空总是好的

因此，第一个示例应该如下所示（将

active

类添加到单击的锚点）：

$（函数（）{
变量$navLIs=$（'nav.ot-anchordots ul li a'）
$navLIs.单击（函数（）{
$navLIs.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
.ot主播ots ul li a.active{
颜色：白色；
文本对齐：右对齐；
背景：白色；
}







不错！很高兴我能帮忙！