javascript - 将 'active' 类添加到 Wordpress 中的纯文本 anchor 菜单

Question

我正在尝试将事件类添加到纯文本无序列表(即不是 wordpress 菜单)上单个 Wordpress 页面内的 anchor 行。我目前正在使用插件将脚本添加到 header ，但我无法使任何东西正常工作，所以我想知道我是否犯了错误，或者插件是否无法正常工作。

我已经尝试了在 Stack 上找到的每一个脚本都添加了一个类，但没有任何改变。分不清是插件问题还是我的代码问题

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');  
});

当您单击点并将其转到 anchor 时，链接应获得“事件”类:点应填充并且行的名称应保持可见。

Answer 1

在这两种情况下，您的问题是您选择了 a 然后运行 ​​.find('a') 因此您没有选择元素.这就是为什么最好运行 alert 或 console.log 来检查变量是否为空。

所以第一个例子应该是这样的(将添加 active 类到被点击的 anchor ):

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

.ot-anchordots ul li a.active {
  color: white;
  text-align: right;
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

第二个应该看起来像这样(点击时将 active 类添加到所有具有相同 href 的 anchor ):

$(function() {
  var navsStr = '.ot-anchordots ul li a';

  $(navsStr).on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var items = $(navsStr).filter('[href$="' + href + '"]');
    var itemsInactive = $(navsStr).filter(':not([href$="' + href + '"])');

    $(items).addClass('active');
    $(itemsInactive).removeClass('active');
  });
});

.ot-anchordots ul li a.active {
  color: white;
  text-align: right;
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>