Question

我试图在纯文本无序列表（即不是wordpress菜单）上的单个Wordpress页面中的锚行中添加活动类。我目前正在使用插件向标头中添加脚本，但是我什么都无法工作，所以我想知道自己是在做错还是插件无法正常工作。

我已经尝试过在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');  
});

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

Answer 1

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

因此第一个示例应如下所示（将添加active类以锚定所单击的锚点）：

$(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的所有锚点）：

$(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>

将'active'类添加到Wordpress中的纯文本锚菜单

1 个答案: